修复icon按钮，单选按钮等控件disable后，控件文本仍然高亮问题

为flutext 和 fluicon增加disable时的alpha值，简化其他控件中对text的disable时颜色的独立控制
Merge branch 'main' of https://github.com/zhuzichu520/FluentUI
2025-07-01 06:41:49 +08:00 · 2024-11-06 10:13:07 +08:00 · 2024-10-31 11:33:19 +08:00 · 2024-10-31 11:32:57 +08:00 · 2024-10-22 16:57:38 +08:00 · 2024-10-21 15:17:55 +02:00
516 changed files with 141443 additions and 10629 deletions
--- a/.clang-format
+++ b/.clang-format
@ -0,0 +1,130 @@
+# References:
+#   https://clang.llvm.org/docs/ClangFormatStyleOptions.html
+#   https://code.qt.io/cgit/qt/qt5.git/tree/_clang-format
+
+BasedOnStyle: LLVM
+
+Standard: c++17
+
+# 指针和引用的对齐方式。
+# 可能的值有：
+# PAS_Left (在配置中： Left) 指针左对齐。
+# PAS_Right (在配置中： Right) 指针右对齐。
+# PAS_Middle (在配置中： Middle) 指针中间对齐。
+PointerAlignment: Right
+
+# public/protected/private 等访问修饰符偏移量
+AccessModifierOffset: -4
+
+# 缩进长度
+IndentWidth: 4
+
+# 连续空行的最大数
+MaxEmptyLinesToKeep: 999
+
+# 在OC中的@property后面添加一个空格。例如：使用“@property (readonly)”而不是“@property(readonly)”
+ObjCSpaceAfterProperty: true
+
+# OC块中所拍的字符数
+ObjCBlockIndentWidth: 4
+
+# 取决于值, 语句“int f() { return 0; }”可以被放到一个单行。
+# 可能的值有：
+# SFS_None (在配置中： None) 从不合并方法或函数到单独的一行。
+# SFS_Empty (在配置中： Empty) 仅合并空的函数。
+# SFS_Inline (在配置中： Inline) 仅合并类中定义的方法或函数. 意味着 “empty”.
+# SFS_All (在配置中： All) 合并所有的方法适应单行.
+AllowShortFunctionsOnASingleLine: None
+
+# 如果为真（true）, 语句“if (a) return;” 能被放到单行。
+AllowShortIfStatementsOnASingleLine: false
+
+# 如果为真（true）, 对齐注释。
+AlignTrailingComments: true
+
+# 如果为真,对齐连续的宏定义
+AlignConsecutiveMacros: true
+
+# 如果为真（true）,将会在“[”之后和“]”之前插入空格。
+SpacesInSquareBrackets: false
+
+# 如果为真（true）, 将会在“(”之后和“)”之前插入空格。
+SpacesInParentheses : false
+
+# 如果为真（true）, 校准连续的声明。
+# 这将会校准连续多行的声明的名字。这将会导致像下面这样的格式：
+# int         aaaa = 12;
+# float       b = 23;
+# std::string ccc = 23;
+AlignConsecutiveDeclarations: false
+
+# 如果为真（true），连续调整多行
+# 这将会调整连续行中的分配操作符。这将会导致像下面这样的格式：
+# int aaaa = 12;
+# int b    = 23;
+# int ccc  = 23;
+AlignConsecutiveAssignments: false
+
+# 如果为假（false），移除分配操作符（=）前空格。
+SpaceBeforeAssignmentOperators: true
+
+# 如果为真（true）, 将会在字面量容器中插入空格(例如 OC和Javascript的数组和字典字面量)。
+SpacesInContainerLiterals: false
+
+# 缩进case标签
+IndentCaseLabels: true
+
+# 如果表达式中包含函数调用，并且函数调用因为表达式太长被放到了下一行，是否缩进
+IndentWrappedFunctionNames: true
+
+# 如果为真（true）, 保持块的起始空行。
+# true:                                  false:
+# if (foo) {                     vs.     if (foo) {
+#                                          bar();
+#   bar();                               }
+# }
+KeepEmptyLinesAtTheStartOfBlocks: true
+
+# 允许所有参数都被放在下一行
+AllowAllParametersOfDeclarationOnNextLine: false
+
+# 使用C风格强制类型转换后，是否在中间添加一个空格
+SpaceAfterCStyleCast: true
+
+# 在模板定义后换行
+AlwaysBreakTemplateDeclarations: Yes
+
+# Tab长度
+TabWidth: 4
+
+# 是否使用Tab
+UseTab: Never
+
+# 在括号后对齐参数
+# someLongFunction(argument1,
+#                  argument2);
+AlignAfterOpenBracket: Align
+
+# 名字空间内部缩进
+NamespaceIndentation: All
+
+# 一行最长列数
+ColumnLimit: 100
+
+# 按层次缩进宏定义
+IndentPPDirectives: AfterHash
+
+# 预处理语句缩进为 2
+PPIndentWidth: 2
+
+# 数组元素对齐
+AlignArrayOfStructures: Left
+
+# 不对头文件排序
+SortIncludes: Never
+
+FixNamespaceComments: false
+
+StatementMacros: ['__qas_attr__', '__qas_exclude__', '__qas_include__']
+
+ForEachMacros: [ foreach, Q_FOREACH, BOOST_FOREACH, forever, Q_FOREVER, QBENCHMARK, QBENCHMARK_ONCE ]
--- a/.cmake/GetGitRevisionDescription.cmake
+++ b/.cmake/GetGitRevisionDescription.cmake
@ -0,0 +1,317 @@
+if(__get_git_revision_description)
+    return()
+endif()
+set(__get_git_revision_description YES)
+
+get_filename_component(_gitdescmoddir ${CMAKE_CURRENT_LIST_FILE} PATH)
+
+function(_git_find_closest_git_dir _start_dir _git_dir_var)
+    set(cur_dir "${_start_dir}")
+    set(git_dir "${_start_dir}/.git")
+    while(NOT EXISTS "${git_dir}")
+        set(git_previous_parent "${cur_dir}")
+        get_filename_component(cur_dir ${cur_dir} DIRECTORY)
+        if(cur_dir STREQUAL git_previous_parent)
+            set(${_git_dir_var}
+                ""
+                PARENT_SCOPE)
+            return()
+        endif()
+        set(git_dir "${cur_dir}/.git")
+    endwhile()
+    set(${_git_dir_var}
+        "${git_dir}"
+        PARENT_SCOPE)
+endfunction()
+
+function(get_git_head_revision _refspecvar _hashvar)
+    _git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+
+    if("${ARGN}" STREQUAL "ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR")
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR TRUE)
+    else()
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR FALSE)
+    endif()
+    if(NOT "${GIT_DIR}" STREQUAL "")
+        file(RELATIVE_PATH _relative_to_source_dir "${CMAKE_SOURCE_DIR}"
+            "${GIT_DIR}")
+        if("${_relative_to_source_dir}" MATCHES "[.][.]" AND NOT ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+            set(GIT_DIR "")
+        endif()
+    endif()
+    if("${GIT_DIR}" STREQUAL "")
+        set(${_refspecvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        set(${_hashvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    if(NOT IS_DIRECTORY ${GIT_DIR})
+        execute_process(
+            COMMAND "${GIT_EXECUTABLE}" rev-parse
+            --show-superproject-working-tree
+            WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+            OUTPUT_VARIABLE out
+            ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+        if(NOT "${out}" STREQUAL "")
+            file(READ ${GIT_DIR} submodule)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" GIT_DIR_RELATIVE
+                ${submodule})
+            string(STRIP ${GIT_DIR_RELATIVE} GIT_DIR_RELATIVE)
+            get_filename_component(SUBMODULE_DIR ${GIT_DIR} PATH)
+            get_filename_component(GIT_DIR ${SUBMODULE_DIR}/${GIT_DIR_RELATIVE}
+                ABSOLUTE)
+            set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+        else()
+            file(READ ${GIT_DIR} worktree_ref)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" git_worktree_dir
+                ${worktree_ref})
+            string(STRIP ${git_worktree_dir} git_worktree_dir)
+            _git_find_closest_git_dir("${git_worktree_dir}" GIT_DIR)
+            set(HEAD_SOURCE_FILE "${git_worktree_dir}/HEAD")
+        endif()
+    else()
+        set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+    endif()
+    set(GIT_DATA "${CMAKE_CURRENT_BINARY_DIR}/CMakeFiles/git-data")
+    if(NOT EXISTS "${GIT_DATA}")
+        file(MAKE_DIRECTORY "${GIT_DATA}")
+    endif()
+
+    if(NOT EXISTS "${HEAD_SOURCE_FILE}")
+        return()
+    endif()
+    set(HEAD_FILE "${GIT_DATA}/HEAD")
+    configure_file("${HEAD_SOURCE_FILE}" "${HEAD_FILE}" COPYONLY)
+
+    configure_file("${_gitdescmoddir}/GetGitRevisionDescription.cmake.in"
+        "${GIT_DATA}/grabRef.cmake" @ONLY)
+    include("${GIT_DATA}/grabRef.cmake")
+
+    set(${_refspecvar}
+        "${HEAD_REF}"
+        PARENT_SCOPE)
+    set(${_hashvar}
+        "${HEAD_HASH}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_latest_tag _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --abbrev=0 --tag
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_commit_counts _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" rev-list HEAD --count
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_describe _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --tags --always ${hash} ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_release_version _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" symbolic-ref --short -q HEAD
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    string(FIND ${out} "release/" found})
+    if(${out} MATCHES "^release/.+$")
+        string(REPLACE "release/" "" tmp_out ${out})
+        set(${_var} "${tmp_out}" PARENT_SCOPE)
+    else()
+        set(${_var} "" PARENT_SCOPE)
+    endif()
+endfunction()
+
+function(git_describe_working_tree _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --dirty ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_get_exact_tag _var)
+    git_describe(out --exact-match ${ARGN})
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_local_changes _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" diff-index --quiet HEAD --
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(res EQUAL 0)
+        set(${_var}
+            "CLEAN"
+            PARENT_SCOPE)
+    else()
+        set(${_var}
+            "DIRTY"
+            PARENT_SCOPE)
+    endif()
+endfunction()
+
+git_release_version(GIT_TAG)
+git_get_exact_tag(GIT_EXACT_TAG)
+if(GIT_TAG STREQUAL "")
+    git_latest_tag(GIT_TAG)
+endif()
+if(GIT_TAG STREQUAL "GIT-TAG-NOTFOUND")
+    set(GIT_TAG "1.0.0")
+endif ()
+git_describe(GIT_DESCRIBE)
+git_commit_counts(GIT_COMMIT_COUNT)
+_git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+if(NOT IS_DIRECTORY ${GIT_DIR})
+    message(STATUS "Current .git not exist")
+    set(GIT_COMMIT_COUNT "1")
+    set(GIT_DESCRIBE "1.0.0")
+    set(GIT_TAG "1.0.0")
+else()
+    message(STATUS "Current .git exist")
+endif()
+string(REPLACE "." "," GIT_TAG_WITH_COMMA ${GIT_TAG})
+string(REGEX MATCH "[0-9]+\\.[0-9]+\\.[0-9]+" GIT_SEMVER "${GIT_TAG}")
+string(REGEX MATCH "([0-9]+)\\.([0-9]+)\\.([0-9]+)" SEMVER_SPLITED "${GIT_SEMVER}")
+set(MAJOR_VERSION ${CMAKE_MATCH_1})
+set(MINOR_VERSION ${CMAKE_MATCH_2})
+set(PATCH_VERSION ${CMAKE_MATCH_3})
+MATH(EXPR VERSION_COUNTER "${MAJOR_VERSION} * 10000 + ${MINOR_VERSION} * 100 + ${PATCH_VERSION}")
+message(STATUS "Current git tag: ${GIT_TAG}, commit count: ${GIT_COMMIT_COUNT}, describe: ${GIT_DESCRIBE}")
+message(STATUS "Current semver: major: ${MAJOR_VERSION}, minor: ${MINOR_VERSION}, patch: ${PATCH_VERSION}, counter: ${VERSION_COUNTER}")
--- a/.cmake/GetGitRevisionDescription.cmake.in
+++ b/.cmake/GetGitRevisionDescription.cmake.in
@ -0,0 +1,21 @@
+set(HEAD_HASH)
+file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
+string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
+if(HEAD_CONTENTS MATCHES "ref")
+    string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
+    if(EXISTS "@GIT_DIR@/${HEAD_REF}")
+        configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
+    else()
+        configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
+        file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
+            if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
+                set(HEAD_HASH "${CMAKE_MATCH_1}")
+            endif()
+    endif()
+else()
+    configure_file("@GIT_DIR@/HEAD" "@GIT_DATA@/head-ref" COPYONLY)
+endif()
+if(NOT HEAD_HASH)
+    file(READ "@GIT_DATA@/head-ref" HEAD_HASH LIMIT 1024)
+    string(STRIP "${HEAD_HASH}" HEAD_HASH)
+endif()
--- a/.cmake/InstallerScript.iss.in
+++ b/.cmake/InstallerScript.iss.in
@ -0,0 +1,52 @@
+; Script generated by the Inno Setup Script Wizard.
+; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!
+
+#define MyAppName "example"
+#define MyAppVersion "${GIT_SEMVER}"
+#define MyAppPublisher "ZhuZiChu"
+#define MyAppURL "https://zhuzichu520.github.io/"
+#define MyAppExeName "example.exe"
+#define MyAppFileDir "dist"
+
+[Setup]
+; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.
+; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
+AppId={{A053D1AE-AEA9-4105-A79B-B5F5BEDC9208}
+AppName={#MyAppName}
+AppVersion={#MyAppVersion}
+;AppVerName={#MyAppName} {#MyAppVersion}
+AppPublisher={#MyAppPublisher}
+AppPublisherURL={#MyAppURL}
+AppSupportURL={#MyAppURL}
+AppUpdatesURL={#MyAppURL}
+DefaultDirName={autopf}\{#MyAppName}
+DisableProgramGroupPage=yes
+; Uncomment the following line to run in non administrative install mode (install for current user only.)
+;PrivilegesRequired=lowest
+OutputDir=.\
+OutputBaseFilename=installer
+Compression=lzma
+SolidCompression=yes
+WizardStyle=modern
+UninstallDisplayIcon={app}\{#MyAppExeName}
+SetupIconFile=.\..\favicon.ico
+MinVersion = 6.0
+
+[Languages]
+Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"
+
+[Tasks]
+Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkablealone
+
+[Files]
+Source: ".\..\{#MyAppFileDir}\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion
+Source: ".\..\{#MyAppFileDir}\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
+; NOTE: Don't use "Flags: ignoreversion" on any shared system files
+
+[Icons]
+Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
+Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
+
+[Run]
+Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent
+
--- a/.cmake/Version.h.in
+++ b/.cmake/Version.h.in
@ -0,0 +1,11 @@
+#ifndef VERSION_H
+#define VERSION_H
+
+#include <QtGlobal>
+
+#define APPLICATION_FULL_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define VERSION_COUNTER ${GIT_COMMIT_COUNT}
+#define COMMIT_HASH "${GIT_DESCRIBE}"
+#define APPLICATION_VERSION "${GIT_SEMVER}"
+
+#endif  // VERSION_H
--- a/.cmake/version_exe.rc.in
+++ b/.cmake/version_exe.rc.in
@ -0,0 +1,34 @@
+1 VERSIONINFO
+ FILEVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ PRODUCTVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ FILEFLAGSMASK 0x3fL
+#ifdef _DEBUG
+ FILEFLAGS 0x1L
+#else
+ FILEFLAGS 0x0L
+#endif
+ FILEOS 0x40004L
+ FILETYPE 0x2L
+ FILESUBTYPE 0x0L
+BEGIN
+    BLOCK "StringFileInfo"
+    BEGIN
+        BLOCK "080404b0"
+        BEGIN
+            VALUE "CompanyName", "ZhuZiChu"
+            VALUE "FileDescription", "${PROJECT_DESCRIPTION}"
+            VALUE "FileVersion", "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+            VALUE "InternalName", "${PROJECT_NAME}.exe"
+            VALUE "LegalCopyright", "Copyright (C) 2023 ZhuZiChu. All rights reserved."
+            VALUE "OriginalFilename", "${PROJECT_NAME}.exe"
+            VALUE "ProductName", "${PROJECT_NAME}"
+            VALUE "ProductVersion", "${GIT_SEMVER}.0"
+        END
+    END
+    BLOCK "VarFileInfo"
+    BEGIN
+        VALUE "Translation", 0x804, 1200
+    END
+END
+
+IDI_ICON1 ICON DISCARDABLE "${CMAKE_SOURCE_DIR}/example/favicon.ico"
--- a/.github/workflows/macos.yml
+++ b/.github/workflows/macos.yml
@ -21,8 +21,8 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [macos-12]
-        qt_ver: [6.5.0]
+        os: [macos-latest]
+        qt_ver: [6.6.2]
        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'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
          
      - name: Set up Ninja
        uses: seanmiddleditch/gha-setup-ninja@v3
@ -50,17 +50,19 @@ jobs:
          cmake --version
          mkdir build
          cd build
-          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 -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
          
      - name: package
        run: |
+          # 先删除所有dSYM文件，减少包的体积
+          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
          # 拷贝依赖
-          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg     
+          sudo macdeployqt bin/Release/${targetName}.app -qmldir=. -dmg     
          
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
        with:
-          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}.zip
+          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
          path: bin/release/${{ env.targetName }}.app
          
      - name: uploadRelease
@ -71,4 +73,4 @@ jobs:
          file: bin/release/${{ env.targetName }}.dmg
          asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.dmg
          tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true
--- a/.github/workflows/ubuntu.yml
+++ b/.github/workflows/ubuntu.yml
@ -22,8 +22,8 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [ubuntu-20.04]
-        qt_ver: [6.5.0]
+        os: [ubuntu-latest]
+        qt_ver: [6.6.2]
        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'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
      
      - name: Set up Ninja
        uses: seanmiddleditch/gha-setup-ninja@v3
@ -49,13 +49,16 @@ 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/6.5.0/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/${{ matrix.qt_ver }}/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
          
      - name: install QT linux deploy
@ -71,10 +74,10 @@ jobs:
          # 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@v2
+      - uses: actions/upload-artifact@v4
        with:
          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
          path: ${{ env.targetName }}.AppImage
@ -87,4 +90,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,12 +18,13 @@ on:
 jobs:
  build:
    name: Build
-    runs-on: windows-2022
+    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
+        os: [windows-latest]
        include:
          - qt_arch: win64_mingw
-            qt_ver: 6.5.0
+            qt_ver: 6.6.2
            qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
            qt_tools_mingw_install: mingw900_64
    env:
@ -34,6 +35,11 @@ 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
@ -41,7 +47,7 @@ jobs:
          version: ${{ matrix.qt_ver }}
          arch: ${{ matrix.qt_arch }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
      
      - name: Qt6 environment configuration
        if: ${{ startsWith( matrix.qt_ver, 6 ) }}
@ -62,7 +68,8 @@ jobs:
        run: |
          mkdir build
          cd build
-          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 ..
+          ninja --version
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
      
      - name: package
@ -75,17 +82,23 @@ jobs:
           $name = ${env:archiveName}
           echo "::set-output name=packageName::$name"       
      
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
        with:
          name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
+          path: dist
      
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./package/InstallerScript.iss
+          
      - name: uploadRelease
        if: startsWith(github.event.ref, 'refs/tags/')
        uses: svenstaro/upload-release-action@v2
        with:
          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          file: ./package/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
          tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true
--- a/.github/workflows/windows-qt5.yml
+++ b/.github/workflows/windows-qt5.yml
@ -0,0 +1,91 @@
+name: Windows Qt5.15.2
+on: 
+  push:
+    paths:
+      - '*.txt'
+      - 'src/**'
+      - 'example/**'
+      - 'scripts/**'
+      - '.github/workflows/windows-qt5.yml'
+  pull_request:
+    paths:
+      - '*.txt'
+      - 'example/**'
+      - 'src/**'
+      - 'scripts/**'
+      - '.github/workflows/windows-qt5.yml'
+      
+jobs:
+  build:
+    name: Build
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [windows-2019]
+        include:
+          - qt_ver: 5.15.2        
+            qt_arch: win32_msvc2019
+            msvc_arch: x86
+            qt_arch_install: msvc2019          
+    env:
+      targetName: example.exe
+      fileName: example
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+             
+      - name: Install Qt
+        uses: jurplel/install-qt-action@v3
+        with:
+          version: ${{ matrix.qt_ver }}
+          arch: ${{ matrix.qt_arch }}
+          cache: ${{steps.cache-qt.outputs.cache-hit}}
+          
+      - name: msvc-build
+        id: build
+        shell: cmd
+        run: |
+          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          mkdir build
+          cd build
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\msvc2019 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+          echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
+          echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
+          echo vcToolsInstallDir=%VCToolsInstallDir% >> %GITHUB_ENV%
+          echo vcToolsRedistDir=%VCToolsRedistDir% >> %GITHUB_ENV%
+          
+      - name: package
+        id: package      
+        env:
+          archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
+          msvcArch: ${{ matrix.msvc_arch }}          
+        shell: pwsh
+        run: |
+          & scripts\windows-publish.ps1 ${env:archiveName} ${env:targetName}
+          # 记录packageName给后续step
+           $name = ${env:archiveName}
+           echo "::set-output name=packageName::$name"     
+           
+      - uses: actions/upload-artifact@v4
+        with:
+          name: ${{ steps.package.outputs.packageName }}
+          path: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./package/InstallerScript.iss
+          
+      - name: uploadRelease
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: ./package/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
+          tag: ${{ github.ref }}
+          overwrite: true
--- a/.github/workflows/windows.yml
+++ b/.github/workflows/windows.yml
@ -21,12 +21,12 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [windows-2019]
+        os: [windows-latest]
        include:
-          - qt_ver: 6.5.0        
+          - qt_ver: 6.6.2        
            qt_arch: win64_msvc2019_64
            msvc_arch: x64
-            qt_arch_install: msvc2019_64          
+            qt_arch_install: msvc2019_64  
    env:
      targetName: example.exe
      fileName: example
@ -35,23 +35,29 @@ 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'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech qt3d'
          
      - name: msvc-build
        id: build
        shell: cmd
        run: |
-          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          call "C:\Program Files\Microsoft Visual Studio\2022\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          ninja --version
          mkdir build
          cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\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\${{ matrix.qt_ver }}\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
          echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
          echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
@ -70,17 +76,23 @@ jobs:
           $name = ${env:archiveName}
           echo "::set-output name=packageName::$name"     
           
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
        with:
          name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
+          path: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./package/InstallerScript.iss
          
      - name: uploadRelease
        if: startsWith(github.event.ref, 'refs/tags/')
        uses: svenstaro/upload-release-action@v2
        with:
          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          file: ./package/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
          tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 
--- a/.gitignore
+++ b/.gitignore
@ -31,9 +31,13 @@ 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
@ -1,3 +0,0 @@
-[submodule "framelesshelper"]
-	path = framelesshelper
-	url = https://github.com/zhuzichu520/framelesshelper.git
--- 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,35 +1,36 @@
 cmake_minimum_required(VERSION 3.20)

-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
+
+if (MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif ()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_CURRENT_LIST_DIR}/.cmake/)
+
+include(GetGitRevisionDescription)

 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
 option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)

-#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
-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()
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)

 add_subdirectory(src)

+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
+)
+
 if (FLUENTUI_BUILD_EXAMPLES)
    add_subdirectory(example)
 endif ()

-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,23 +1,21 @@
 <div align=center>
-  <img width=64 src="doc/preview/fluent_design.svg">
-</div>
+<img width=64 src="doc/preview/fluent_design.svg">

-<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>
+# QML FluentUI
+
+A Fluent Design component library for Qt QML, You need PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML).
+
+</div>

 ![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">
-</div>

+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"
@ -31,7 +29,6 @@ English | <a href="README_zh_CN.md">简体中文</a>
 [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>
@ -46,21 +43,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 pecify your platform and compilers.)
+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please specify your platform and compilers.)

 + run `example` program.

-or 
+or

 + Clone the repository.

-```SHELL
+```bash
 git clone --recursive https://github.com/zhuzichu520/FluentUI.git
 ```

 + Build

-```
+```bash
 git clone --recursive https://github.com/zhuzichu520/FluentUI.git
 cd FluentUI
 mkdir build
@ -79,38 +76,35 @@ 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|
-|:----:|:----:|:----:|
-|FluApp|The initial entry of the program|Router supported(SPA)|
-|FluWindow|Frameless Window|*This only works on windows|
-|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
-|FluText|Common text||
-|FluButton|Common button|![btn](doc/preview/demo_standardbtn.png) |
-|FluFilledButton|Filled button|![filledbtn](doc/preview/demo_filledbtn.png)|
-|FluTextButton|Text button|![textbtn](doc/preview/demo_textbtn.png)|
-|FluToggleButton|Toggle buttons|![togglebtn](doc/preview/demo_toggle_btn.png)|
-|FluIcon|Common icon|![icons](doc/preview/demo_icon.png)|
-|FluRadioButton|radio button|![radiobtn](doc/preview/demo_radiobtn.png)|
-|FluTextBox|Single-line input box|![textbox](doc/preview/demo_textbox.png)|
-|FluMultiLineTextBox|Multi-lines input area|![textarea](doc/preview/demo_multiline_textbox.png)|
-|FluToggleSwitch|toggle switch|![toggleswitch](doc/preview/demo_toggle_switch.png)|
-
+|       Catalog       |              Detail              |                    Notes / Demos                    |
+| :-----------------: | :------------------------------: | :-------------------------------------------------: |
+|       FluApp        | The initial entry of the program |                Router supported(SPA)                |
+|      FluWindow      |         Frameless Window         |             *This only works on windows             |
+|      FluAppBar      |  Title bar on top of the window  |  Drag, minimize, maximize and close are supported.  |
+|       FluText       |           Common text            |                                                     |
+|      FluButton      |          Common button           |      ![btn](doc/preview/demo_standardbtn.png)       |
+|   FluFilledButton   |          Filled button           |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|    FluTextButton    |           Text button            |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|   FluToggleButton   |          Toggle buttons          |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|       FluIcon       |           Common icon            |         ![icons](doc/preview/demo_icon.png)         |
+|   FluRadioButton    |           radio button           |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|     FluTextBox      |      Single-line input box       |      ![textbox](doc/preview/demo_textbox.png)       |
+| FluMultiLineTextBox |      Multi-lines input area      | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|   FluToggleSwitch   |          toggle switch           | ![toggleswitch](doc/preview/demo_toggle_switch.png) |

 View more [`here`](doc/md/all_components.md)!

-
 ## Reference
+
 + [**Windows design**: Design guidelines and toolkits of Microsoft.](https://learn.microsoft.com/en-us/windows/apps/design/)
 + [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)

-
 ## License

 This FluentUI library currently licensed under [MIT License](./License)
@ -120,4 +114,5 @@ 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,99 +1,118 @@
-# FluentUI
+<div align=center>
+<img width=64 src="doc/preview/fluent_design.svg">

-## 简介
+# QML FluentUI

-这是一个漂亮的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>
+一个 Qt QML 的 Fluent Design 组件库，需要 PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML)。

-## 编译状态
-| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
-|---------------|---------------|-----------------|
-| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
+</div>
+
+![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
+
+<div align=center>
+
+[English](README.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 程序了！查看文档了解更多详情。
+
+## 📑 文档
+
+(正在进行中...🚀)
+
 ## 支持的组件

-|目录|说明|备注|
-|----|----|----|
-|FluApp|初始化入口|支持路由跳转|
-|FluWindow|无边框窗口|解决windows拖动闪烁问题|
-|FluAppBar|窗口顶部标题栏|支持拖动窗口，最小化、最大化、关闭窗口|
-|FluText|Text文本||
-|FluButton|按钮||
-|FluFilledButton|实心按钮||
-|FluIconButton|图标按钮||
-|FluTextButton|文本按钮||
-|FluIcon|图标||
-|FluRadioButton|单选按钮||
-|FluTextBox|单行输入框||
-|FluMultiLineTextBox|多行输入框||
-|FluToggleSwitch|开关按钮||
-|FluSlider|拖动条||
-|FluInfoBar|提示Toast||
-|FluContentDialog|对话框||
-|FluProgressBar|条形进度条||
-|FluProgressRing|圆形进度条||
-|FluRectangle|矩形|支持部分圆角、clip|
-|FluMenu|菜单框||
-|FluTooltip|tooltip提示框||
-|FluTreeView|树控件||
-|FluTheme|主题设置|支持主题颜色切换，夜间模式|
-|FluCarousel|轮播图组件|支持无限轮播|
-|FluTimePicker|时间选择器||
-|FluDatePicker|日期选择器||
-|FluMenu|菜单Popup||
-|FluNavigationView|响应式导航布局||
-|FluScrollbar|滚动条||
-|FluToggleButton|开关按钮||
-|FluPagination|分页组件||
-|FluTableView|表格组件||
-|FluMediaPlayer|播放器||
-|FluFlipView|FlipView||
+|        目录         |       详情       |                    备注 / Demos                     |
+| :-----------------: | :--------------: | :-------------------------------------------------: |
+|       FluApp        |   程序初始入口   |                   支持路由（SPA）                   |
+|      FluWindow      |     无框窗口     |                  *仅适用于 Windows                  |
+|      FluAppBar      | 窗口顶部的标题栏 |          支持拖动、最小化、最大化和关闭。           |
+|       FluText       |     通用文本     |                                                     |
+|      FluButton      |     通用按钮     |      ![btn](doc/preview/demo_standardbtn.png)       |
+|   FluFilledButton   |   Filled 按钮    |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|    FluTextButton    |     文本按钮     |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|   FluToggleButton   |     切换按钮     |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|       FluIcon       |     通用图标     |         ![icons](doc/preview/demo_icon.png)         |
+|   FluRadioButton    |      单选框      |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|     FluTextBox      |    单行输入框    |      ![textbox](doc/preview/demo_textbox.png)       |
+| FluMultiLineTextBox |    多行输入框    | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|   FluToggleSwitch   |       开关       | ![toggleswitch](doc/preview/demo_toggle_switch.png) |

-# 部分效果预览
+在 [`这里`](doc/md/all_components.md) 查看更多！

-## 首页
+## 参考

-![](doc/preview/home.png)
+ [**Windows 设计**：Microsoft 的设计指南和工具包。](https://learn.microsoft.com/zh-CN/windows/apps/design/)
+ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)

-## 各种Button按钮
+## 许可

-![](doc/preview/buttons.png)
+本 FluentUI 库目前采用 [MIT License](./License) 许可。

-## 主题颜色切换、夜间模式
+## 星标历史

-![](doc/preview/theme.png)
+[![星标历史图表](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)

-## TableView表格组件
+## ⚡ 游客数量

-![](doc/preview/tableview.png)
-
-## FluTreeView树组件
-
-![](doc/preview/treeview.png)
-
-## 轮播图组件
-
-![](doc/preview/carousel.png)
-
-### ⚡ Visitor count
-![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
+![游客数量](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,140 +1,171 @@
 cmake_minimum_required(VERSION 3.20)

-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0)

 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-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 ()

 #设置可执行文件输出目录
-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()
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})

-#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
-file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
+if (APPLE)
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
+else ()
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()

-#设置版本号
-add_definitions(-DVERSION=1,4,0,0)
+#导入Qt相关依赖包
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)

-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")
-    qt_standard_project_setup()
-else()
-    set(CMAKE_AUTOMOC ON)
-    set(CMAKE_AUTORCC ON)
-    set(CMAKE_AUTOUIC ON)
-endif()
+##生成版本信息头文件
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
+configure_file(
+        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+        ${HEADER_FILE_VERSION_PATH}
+)

 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
-foreach(filepath ${CPP_FILES})
+foreach (filepath ${CPP_FILES})
    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
    list(APPEND sources_files ${filename})
-endforeach(filepath)
+endforeach (filepath)

-#遍历所有qml文件
-file(GLOB_RECURSE QML_PATHS *.qml)
-foreach(filepath ${QML_PATHS})
-    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-    list(APPEND qml_files ${filename})
-endforeach(filepath)
+if (WIN32)
+    list(APPEND sources_files "src/app_dmp.h")
+endif ()

-#遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
-foreach(filepath ${RES_PATHS})
-    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-    list(APPEND resource_files ${filename})
-endforeach(filepath)
-
-#添加可执行文件
-if (CMAKE_SYSTEM_NAME STREQUAL "Windows")
-    qt_add_executable(example
-        ${sources_files}
-        example.rc
+#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
+set(EXAMPLE_VERSION_RC_PATH "")
+if (WIN32)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+            ${EXAMPLE_VERSION_RC_PATH}
    )
-else ()
-    qt_add_executable(example
-        ${sources_files}
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
    )
 endif ()

-#复制动态库到可执行文件同级目录下
-if(WIN32)
-    if(CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/msvc/*.dll)
-    else()
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
-    endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    file(GLOB DLL_FILES ${DLLPATH})
-    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
-        COMMAND ${CMAKE_COMMAND} -E copy
-        ${DLL_FILES}
-        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
-    )
-endif()
+list(APPEND sources_files ${PROJECT_NAME}.qrc)

-#添加qml模块
-qt_add_qml_module(example
-    URI "example"
-    VERSION 1.0
-    QML_FILES ${qml_files}
-    RESOURCES ${resource_files}
-)
+#添加可执行文件
+if (WIN32)
+    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
+endif ()
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    qt_add_executable(${PROJECT_NAME}
+            MANUAL_FINALIZATION
+            ${sources_files}
+    )
+else ()
+    add_executable(${PROJECT_NAME}
+            ${sources_files}
+    )
+endif ()
+add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
+
+#复制程序运行所需要的动态库
+if (WIN32)
+    if (MSVC)
+        if (CMAKE_SIZEOF_VOID_P EQUAL 4)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+        elseif (CMAKE_SIZEOF_VOID_P EQUAL 8)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+        endif ()
+    elseif (MINGW)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    endif ()
+    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
+
+#复制FluentUI源码到运行目录下，用于脚手架生成
+file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)

 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
-target_include_directories(example PRIVATE
-    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+target_include_directories(${PROJECT_NAME} PRIVATE
+        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )

+#如果是静态库则需要手动注册插件，导入FluentUI.h头文件
+if (FLUENTUI_BUILD_STATIC_LIB)
+    target_include_directories(${PROJECT_NAME} PRIVATE
+            ${CMAKE_SOURCE_DIR}/src
+    )
+endif ()
+
 #设置属性
-set_target_properties(example PROPERTIES
-    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
-    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
-    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-    MACOSX_BUNDLE TRUE
-    WIN32_EXECUTABLE TRUE
+set_target_properties(${PROJECT_NAME} PROPERTIES
+        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
+        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+        MACOSX_BUNDLE TRUE
+        WIN32_EXECUTABLE TRUE
 )

-#链接库
-if (FLUENTUI_BUILD_STATIC_LIB)
-    target_link_libraries(example PRIVATE
-        Qt6::Quick
-        Qt6::Svg
-        Qt6::Network
-        fluentui
-        fluentuiplugin
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-else()
-    target_link_libraries(example PRIVATE
-        Qt6::Quick
-        Qt6::Svg
-        Qt6::Network
-        fluentuiplugin
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-endif()
-
-#安装
-install(TARGETS example
-    BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+#Release也支持日志打印代码位置
+target_compile_definitions(${PROJECT_NAME}
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
 )
+
+#目标文件链接库
+target_link_libraries(${PROJECT_NAME} PRIVATE
+        Qt${QT_VERSION_MAJOR}::Quick
+        Qt${QT_VERSION_MAJOR}::Svg
+        Qt${QT_VERSION_MAJOR}::Network
+        fluentuiplugin
+)
+
+#添加部署脚本
+if (CMAKE_BUILD_TYPE MATCHES "Release")
+    if (APPLE)
+        find_program(QT_DEPLOY_QT NAMES macdeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
+                COMMENT "MacOs Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+    if (WIN32)
+        find_program(QT_DEPLOY_QT NAMES windeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
+                COMMENT "Windows Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+endif ()
--- a/example/README.md
+++ b/example/README.md
@ -0,0 +1,18 @@
+# FluentUI 脚手架开发说明
+
+## 代码说明
+
+文件编码格式请用utf-8不带bom，代码中最好不要含有中文（包括注释），中文可能会改变文件格式导致编译失败，还会出现乱码，显示中文请用国际化，c++中用tr函数，qml中用qsTr函数
+
+### 脚本说明
+
+1. **Script-UpdateTranslations**
+
+   用于更新ts与qm文件，当你的代码添加了tr或者qsTr函数后，执行这个脚本会更新ts文件，然后编写翻译后，再执行这个脚本，qm文件会更新生效
+
+2. **Script-DeployRelease**
+
+   执行Qt的windeployqt或macdeployqt命令，这个脚本只在windows与macos才有，linux不支持
+
+
+
--- a/example/example.qrc
+++ b/example/example.qrc
@ -0,0 +1,218 @@
+<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
@ -1,42 +0,0 @@
-#include <windows.h>
-
-IDI_ICON1 ICON "favicon.ico"
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c,d) STR(a.b.c.d)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((VERSION))
-
-VS_VERSION_INFO VERSIONINFO
-FILEVERSION     VERSION
-PRODUCTVERSION  VERSION
-FILEFLAGSMASK   0x3fL
-#ifdef _DEBUG
-FILEFLAGS       VS_FF_DEBUG
-#else
-FILEFLAGS       0x0L
-#endif
-FILEOS          VOS_NT_WINDOWS32
-FILETYPE        VFT_APP
-FILESUBTYPE     VFT2_UNKNOWN
-BEGIN
-    BLOCK "StringFileInfo"
-    BEGIN
-        BLOCK "040904b0"
-        BEGIN
-            VALUE "Comments",         "Built by the FluentUI."
-            VALUE "CompanyName",      "zhuzichu"
-            VALUE "FileDescription",  "example"
-            VALUE "FileVersion",      VER_STR
-            VALUE "InternalName",     ""
-            VALUE "LegalCopyright",   "Copyright (C) 2023"
-            VALUE "OriginalFilename", ""
-            VALUE "ProductName",      "example"
-            VALUE "ProductVersion",   VER_STR
-        END
-    END
-    BLOCK "VarFileInfo"
-    BEGIN
-        VALUE "Translation", 0x409, 1200
-    END
-END
--- 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,44 +1,125 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0

-Window {
+FluLauncher {
    id: app
-    flags: Qt.SplashScreen
-
-    FluHttpInterceptor{
-        id:interceptor
-        function onIntercept(request){
-            if(request.method === "get"){
-                request.params["method"] = "get"
-            }
-            if(request.method === "post"){
-                request.params["method"] = "post"
-            }
-            request.headers["token"] ="yyds"
-            request.headers["os"] ="pc"
-            console.debug(JSON.stringify(request))
-            return request
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+    Connections{
+        target: FluApp
+        function onUseSystemAppBarChanged(){
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
+        }
+    }
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
        }
    }
-
    Component.onCompleted: {
-        FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
-        FluTheme.enableAnimation = true
-        FluApp.routes = {
+        Network.openLog = false
+        Network.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
+        FluTheme.animationEnabled = true
+        FluRouter.routes = {
            "/":"qrc:/example/qml/window/MainWindow.qml",
            "/about":"qrc:/example/qml/window/AboutWindow.qml",
            "/login":"qrc:/example/qml/window/LoginWindow.qml",
            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
            "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
            "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/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
@ -0,0 +1,132 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'horizontalBar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js HorizontalBar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}
--- a/example/qml/chart/T_BubbleChart.qml
+++ b/example/qml/chart/T_BubbleChart.qml
@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bubble Chart")
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bubble'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'First Dataset',
+                            data: [{
+                                    x: 20,
+                                    y: 30,
+                                    r: 15
+                                }, {
+                                    x: 12,
+                                    y: 70,
+                                    r: 20
+                                }, {
+                                    x: 11,
+                                    y: 28,
+                                    r: 8
+                                }, {
+                                    x: 9,
+                                    y: 28,
+                                    r: 10
+                                }, {
+                                    x: 43,
+                                    y: 7,
+                                    r: 14
+                                }, {
+                                    x: 22,
+                                    y: 22,
+                                    r: 12
+                                }, {
+                                    x: 40,
+                                    y: 10,
+                                    r: 10
+                                }],
+                            backgroundColor: 'rgb(255, 99, 132)'
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bubble Chart - Multi Axis'
+                    }
+                }
+            }
+        }
+    }
+
+}
--- a/example/qml/chart/T_LineChart.qml
+++ b/example/qml/chart/T_LineChart.qml
@ -0,0 +1,63 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    id: root
+    title: qsTr("Line Chart")
+    property var data : []
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            id: chart
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: root.data,
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+        Timer{
+            id: timer
+            interval: 300
+            repeat: true
+            onTriggered: {
+                root.data.push(Math.random()*100)
+                if(root.data.length>7){
+                    root.data.shift()
+                }
+                chart.animateToNewData()
+            }
+        }
+        Component.onCompleted: {
+            timer.restart()
+        }
+    }
+}
--- a/example/qml/chart/T_PieChart.qml
+++ b/example/qml/chart/T_PieChart.qml
@ -0,0 +1,93 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Pie Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "doughnut"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Doughnut Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "pie"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Pie Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}
--- a/example/qml/chart/T_PolarAreaChart.qml
+++ b/example/qml/chart/T_PolarAreaChart.qml
@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Polar Area Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'polarArea'
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Green',
+                        'Yellow',
+                        'Grey',
+                        'Blue'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [11, 16, 7, 3, 14],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(75, 192, 192)',
+                                'rgb(255, 205, 86)',
+                                'rgb(201, 203, 207)',
+                                'rgb(54, 162, 235)'
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js PolarArea Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+}
--- a/example/qml/chart/T_RadarChart.qml
+++ b/example/qml/chart/T_RadarChart.qml
@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Radar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'radar'
+            chartData: { return {
+                    labels: [
+                        'Eating',
+                        'Drinking',
+                        'Sleeping',
+                        'Designing',
+                        'Coding',
+                        'Cycling',
+                        'Running'
+                    ],
+                    datasets:
+                        [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 90, 81, 56, 55, 40],
+                            fill: true,
+                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                            borderColor: 'rgb(255, 99, 132)',
+                            pointBackgroundColor: 'rgb(255, 99, 132)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(255, 99, 132)'
+                        }, {
+                            label: 'My Second Dataset',
+                            data: [28, 48, 40, 19, 96, 27, 100],
+                            fill: true,
+                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                            borderColor: 'rgb(54, 162, 235)',
+                            pointBackgroundColor: 'rgb(54, 162, 235)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(54, 162, 235)'
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Radar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        line: {
+                            borderWidth: 3
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}
--- a/example/qml/chart/T_ScatterChart.qml
+++ b/example/qml/chart/T_ScatterChart.qml
@ -0,0 +1,122 @@
+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,32 +1,27 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0

 FluExpander{

    id:control
    property string code: ""
-    headerText: "Source"
+    headerText: qsTr("Source")
    contentHeight:content.height
    focus: false

-    FluMultilineTextBox{
+    FluCopyableText{
        id:content
        width:parent.width
-        activeFocusOnTab: false
-        activeFocusOnPress: false
-        readOnly: true
        text:highlightQmlCode(code)
-        textFormat: FluMultilineTextBox.RichText
-        KeyNavigation.priority: KeyNavigation.BeforeItem
-        background:Rectangle{
-            radius: 4
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-            border.width: 1
-        }
+        textFormat: FluCopyableText.RichText
+        padding: 10
+        topPadding: 10
+        leftPadding: 10
+        rightPadding: 10
+        bottomPadding: 10
    }

    FluIconButton{
@ -38,8 +33,8 @@ FluExpander{
            topMargin: 5
        }
        onClicked:{
-            FluTools.clipText(content.text)
-            showSuccess("复制成功")
+            FluTools.clipText(FluTools.html2PlantText(content.text))
+            showSuccess(qsTr("The Copy is Successful"))
        }
    }

@ -54,7 +49,6 @@ FluExpander{
    }

    function highlightQmlCode(code) {
-        // 定义 QML 关键字列表
        var qmlKeywords = [
                    "FluTextButton",
                    "FluAppBar",
@ -80,7 +74,6 @@ FluExpander{
                    "FluIcon",
                    "FluIconButton",
                    "FluInfoBar",
-                    "FluItem",
                    "FluMediaPlayer",
                    "FluMenu",
                    "FluMenuItem",
@ -119,7 +112,7 @@ FluExpander{
                    "FluTableView",
                    "FluColors",
                    "FluTheme",
-                    "FluStatusView",
+                    "FluStatusLayout",
                    "FluRatingControl",
                    "FluPasswordBox",
                    "FluBreadcrumbBar",
@ -131,8 +124,22 @@ FluExpander{
                    "FluRadioButtons",
                    "FluImage",
                    "FluSpinBox",
-                    "FluHttp",
-                    "FluWatermark"
+                    "FluWatermark",
+                    "FluTour",
+                    "FluQRCode",
+                    "FluTimeline",
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredLayout",
+                    "FluProgressButton",
+                    "FluLoadingButton",
+                    "FluClip",
+                    "FluNetwork",
+                    "FluShortcutPicker",
+                    "FluWindowResultLauncher",
+                    "FluRouter",
+                    "FluGroupBox",
+                    "FluSheet",
                ];
        code = code.replace(/\n/g, "<br>");
        code = code.replace(/ /g, "&nbsp;");
--- a/example/qml/component/CustomWindow.qml
+++ b/example/qml/component/CustomWindow.qml
@ -1,63 +0,0 @@
-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
@ -0,0 +1,10 @@
+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,30 +1,42 @@
 pragma Singleton

-import QtQuick
-import FluentUI
+import QtQuick 2.15
+import FluentUI 1.0

 FluObject{

    property var navigationView
+    property var paneItemMenu

    id:footer_items

    FluPaneItemSeparator{}

    FluPaneItem{
-        title:lang.about
+        title:qsTr("About")
        icon:FluentIcons.Contact
-        tapFunc:function(){
-            FluApp.navigate("/about")
+        onTapListener:function(){
+            FluRouter.navigate("/about")
        }
    }

    FluPaneItem{
-        title:lang.settings
+        title:qsTr("Settings")
+        menuDelegate: paneItemMenu
        icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
        onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
        }
    }

+    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,375 +1,515 @@
 pragma Singleton

-import QtQuick
-import FluentUI
+import QtQuick 2.15
+import FluentUI 1.0

 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:lang.home
-        infoBadge:FluBadge{
+        title: qsTr("Home")
+        menuDelegate: paneItemMenu
+        infoBadge: FluBadge{
            count: item_home.count
        }
-        icon:FluentIcons.Home
-        onTap:{
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
            if(navigationView.getCurrentUrl()){
                item_home.count = 0
            }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
        }
    }

    FluPaneItemExpander{
-        title:lang.basic_input
-        icon:FluentIcons.CheckboxComposite
+        title: qsTr("PaneItemExpander Disabled")
+        iconVisible: false
+        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:"Buttons"
-            image:"qrc:/example/res/image/control/Button.png"
-            recentlyUpdated:true
-            desc:"A control that responds to user input and raisesa Click event."
-            onTap:{
+            title: qsTr("Buttons")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:qsTr("A control that responds to user input and raisesa Click event.")})
+            url: "qrc:/example/qml/page/T_Buttons.qml"
+            onTap: {
                item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
            }
        }
        FluPaneItem{
-            id:item_text
-            title:"Text"
+            id: item_text
+            title: qsTr("Text")
+            menuDelegate: paneItemMenu
            count: 5
-            infoBadge:FluBadge{
+            infoBadge: FluBadge{
                count: item_text.count
                color: Qt.rgba(82/255,196/255,26/255,1)
            }
-            onTap:{
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
                item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
+                navigationView.push(url)
            }
        }
        FluPaneItem{
-            title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            title: qsTr("Image")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Image.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Slider"
-            image:"qrc:/example/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            title: qsTr("Slider")
+            menuDelegate: paneItemMenu
+            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.")})
+            url: "qrc:/example/qml/page/T_Slider.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"CheckBox"
-            image:"qrc:/example/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            title: qsTr("CheckBox")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:qsTr("A control that a user can select or clear.")})
+            url: "qrc:/example/qml/page/T_CheckBox.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            title: qsTr("RadioButton")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            title: qsTr("ToggleSwitch")
+            menuDelegate: paneItemMenu
+            url: "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:lang.form
-        icon:FluentIcons.GridView
-        FluPaneItem{
-            title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+        title: qsTr("Form")
+        icon: FluentIcons.GridView
+        FluPaneItem {
+            title: qsTr("TextBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TextBox.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            title: qsTr("TimePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            title: qsTr("DatePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            title: qsTr("CalendarPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            title: qsTr("ColorPicker")
+            menuDelegate: paneItemMenu
+            url: "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:lang.surface
-        icon:FluentIcons.SurfaceHub
+        title: qsTr("Surface")
+        icon: FluentIcons.SurfaceHub
        FluPaneItem{
-            title:"InfoBar"
-            image:"qrc:/example/res/image/control/InfoBar.png"
-            recentlyUpdated:true
-            desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            title: qsTr("InfoBar")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:qsTr("An inline message to display app-wide statuschange information.")})
+            url: "qrc:/example/qml/page/T_InfoBar.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            title: qsTr("Progress")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            title: qsTr("RatingControl")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            title: qsTr("Badge")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            title: qsTr("Rectangle")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            title: qsTr("Clip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            title: qsTr("Carousel")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            title: qsTr("Expander")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            title: qsTr("Watermark")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
        }
    }

    FluPaneItemExpander{
-        title:lang.popus
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+        title: qsTr("Layout")
+        icon: FluentIcons.DockLeft
+        FluPaneItem {
+            title: qsTr("StaggeredLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StaggeredLayout.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            id:item_combobox
-            title:"ComboBox"
+            title: qsTr("SplitLayout")
+            menuDelegate: paneItemMenu
+            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)
            }
-            onTap:{
+            url: "qrc:/example/qml/page/T_ComboBox.qml"
+            onTap: {
                item_combobox.count = 0
                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
            }
        }
        FluPaneItem{
-            title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            title: qsTr("Tooltip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            title: qsTr("Menu")
+            menuDelegate: paneItemMenu
+            url: "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:lang.navigation
-        icon:FluentIcons.AllApps
+        title: qsTr("Navigation")
+        icon: FluentIcons.AllApps
        FluPaneItem{
-            title:"Pivot"
-            image:"qrc:/example/res/image/control/Pivot.png"
-            recentlyAdded:true
-            order:3
-            desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            title: qsTr("Pivot")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:qsTr("Presents information from different sources in a tabbed view.")})
+            url: "qrc:/example/qml/page/T_Pivot.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            title: qsTr("BreadcrumbBar")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"TabView"
-            image:"qrc:/example/res/image/control/TabView.png"
-            recentlyAdded:true
-            order:1
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            title: qsTr("TabView")
+            menuDelegate: paneItemMenu
+            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.")})
+            url: "qrc:/example/qml/page/T_TabView.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            title: qsTr("TreeView")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TreeView.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"TableView"
-            image:"qrc:/example/res/image/control/DataGrid.png"
-            recentlyAdded:true
-            order:4
-            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            title: qsTr("TableView")
+            menuDelegate: paneItemMenu
+            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")})
+            url: "qrc:/example/qml/page/T_TableView.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            title: qsTr("Pagination")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            title: qsTr("MultiWindow")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"FlipView"
-            image:"qrc:/example/res/image/control/FlipView.png"
-            recentlyAdded:true
-            order:2
-            desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            title: qsTr("FlipView")
+            menuDelegate: paneItemMenu
+            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.")})
+            url: "qrc:/example/qml/page/T_FlipView.qml"
+            onTap: { navigationView.push(url) }
        }
    }

    FluPaneItemExpander{
-        title:lang.theming
+        title: qsTr("Theming")
        icon:FluentIcons.Brightness
        FluPaneItem{
-            title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            title: qsTr("Acrylic")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            title: qsTr("Theme")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            title: qsTr("Typography")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            title: qsTr("Icons")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Icons.qml"
+            onTap: { navigationView.push(url) }
        }
    }

    FluPaneItemExpander{
-        title:lang.other
-        icon:FluentIcons.Shop
+        title: qsTr("Chart")
+        icon: FluentIcons.AreaChart
        FluPaneItem{
-            title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            title: qsTr("Bar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BarChart.qml"
+            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
-            id:item_other
-            title:"RemoteLoader"
+            title: qsTr("Line Chart")
+            menuDelegate: paneItemMenu
+            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)
            }
-            onTap:{
+            url: "qrc:/example/qml/page/T_RemoteLoader.qml"
+            onTap: {
                item_other.count = 0
                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
            }
        }
        FluPaneItem{
-            title:"HotLoader"
-            tapFunc:function(){
-                 FluApp.navigate("/hotload")
+            title: qsTr("Hot Loader")
+            onTapListener: function(){
+                FluRouter.navigate("/hotload")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Test Crash")
+            onTapListener: function(){
+                AppInfo.testCrash()
+            }
+            Component.onCompleted: {
+                visible = FluTools.isWin()
            }
        }
    }

    function getRecentlyAddedData(){
        var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.recentlyAdded){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            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.order-o1.order })
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.order })
        return arr
    }

@ -378,7 +518,7 @@ FluObject{
        var items = navigationView.getItems();
        for(var i=0;i<items.length;i++){
            var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
                arr.push(item)
            }
        }
@ -386,6 +526,9 @@ 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
@ -1,9 +0,0 @@
-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 MainEvent 1.0 MainEvent.qml
+singleton GlobalModel 1.0 GlobalModel.qml
--- a/example/qml/page/T_Acrylic.qml
+++ b/example/qml/page/T_Acrylic.qml
@ -1,17 +1,16 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Acrylic"
+    title: qsTr("Acrylic")

    RowLayout{
        spacing: 10
-        Layout.topMargin: 20
        FluText{
            text:"tintColor:"
            Layout.alignment: Qt.AlignVCenter
@ -42,19 +41,19 @@ FluScrollablePage{
            value: 32
        }
    }
-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 1200/4+20
-        paddings: 10
+        Layout.preferredHeight: 1200/4+20
+        padding: 10
        Layout.topMargin: 10
-        FluRectangle{
+        FluClip{
            width: 1920/4
            height: 1200/4
-            radius:[15,15,15,15]
+            radius:[8,8,8,8]
            Image {
                id:image
                asynchronous: true
-                source: "qrc:/example/res/image/bg_scenic.png"
+                source: "qrc:/example/res/image/bg_scenic.jpg"
                anchors.fill: parent
                sourceSize: Qt.size(2*width,2*height)
            }
@ -64,7 +63,7 @@ FluScrollablePage{
                width: 200
                height: 200
                tintOpacity: slider_tint_opacity.value/100
-                tintColor: color_picker.colorValue
+                tintColor: color_picker.current
                blurRadius: slider_blur_radius.value
                x:(image.width-width)/2
                y:(image.height-height)/2
@ -72,11 +71,12 @@ FluScrollablePage{
                    anchors.centerIn: parent
                    text: "Acrylic"
                    color: "#FFFFFF"
-                    font.bold: true
+                    font: FluTextStyle.Subtitle
                }
                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: -1
+        Layout.topMargin: -6
        code:'Image{
    id:image
    width: 800
--- a/example/qml/page/T_Awesome.qml
+++ b/example/qml/page/T_Awesome.qml
@ -1,71 +0,0 @@
-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,30 +1,31 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Badge"
+    title: qsTr("Badge")

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

        Column{
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
+                right: parent.right
            }
            FluText{
-                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
+                wrapMode: Text.WrapAnywhere
+                width: parent.width
+                text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
            }
-
            Row{
                spacing: 20
                Rectangle{
@ -112,7 +113,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'Rectangle{
    width: 40
    height: 40
--- a/example/qml/page/T_BreadcrumbBar.qml
+++ b/example/qml/page/T_BreadcrumbBar.qml
@ -1,13 +1,13 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"BreadcurmbBar"
+    title: qsTr("BreadcurmbBar")

    Component.onCompleted: {
        var items = []
@ -18,11 +18,10 @@ FluScrollablePage{
        breadcrumb_2.items = items
    }

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

        FluBreadcrumbBar{
            id:breadcrumb_1
@ -36,10 +35,10 @@ FluScrollablePage{
    }


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

        ColumnLayout{
@ -48,7 +47,7 @@ FluScrollablePage{
            spacing: 10

            FluFilledButton{
-                text:"Reset sample"
+                text: qsTr("Reset sample")
                onClicked:{
                    var items = []
                    for(var i=0;i<10;i++){
@ -66,7 +65,6 @@ FluScrollablePage{
                Layout.fillWidth: true
                onClickItem:
                    (model)=>{
-                        //不是点击最后一个item元素
                        if(model.index+1!==count()){
                            breadcrumb_2.remove(model.index+1,count()-model.index-1)
                        }
@ -78,7 +76,7 @@ FluScrollablePage{

    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluBreadcrumbBar{
    width:parent.width
    separator:">"
--- a/example/qml/page/T_Buttons.qml
+++ b/example/qml/page/T_Buttons.qml
@ -1,30 +1,27 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Buttons"
+    title: qsTr("Buttons")

    FluText{
-        Layout.topMargin: 20
-        text:"支持Tab键切换焦点，空格键执行点击事件"
+        text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
    }

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

        FluTextButton{
-            disabled:text_button_switch.checked
-            text:"Text Button"
-            contentDescription: "文本按钮"
+            disabled: text_button_switch.checked
+            text: qsTr("Text Button")
            onClicked: {
                showInfo("点击Text Button")
            }
@ -34,17 +31,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id:text_button_switch
+            id: text_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluTextButton{
    text:"Text Button"
    onClicked: {
@ -53,17 +50,17 @@ FluScrollablePage{
 }'
    }

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

        FluButton{
-            disabled:button_switch.checked
-            text:"Standard Button"
+            disabled: button_switch.checked
+            text: qsTr("Standard Button")
            onClicked: {
-                showInfo("点击StandardButton")
+                showInfo(qsTr("Click StandardButton"))
            }
            anchors{
                verticalCenter: parent.verticalCenter
@ -71,17 +68,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id:button_switch
+            id: button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluButton{
    text:"Standard Button"
    onClicked: {
@ -90,17 +87,17 @@ FluScrollablePage{
 }'
    }

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

        FluFilledButton{
-            disabled:filled_button_switch.checked
-            text:"Filled Button"
+            disabled: filled_button_switch.checked
+            text: qsTr("Filled Button")
            onClicked: {
-                showWarning("点击FilledButton"+height)
+                showWarning(qsTr("Click FilledButton"))
            }
            anchors{
                verticalCenter: parent.verticalCenter
@ -108,17 +105,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id:filled_button_switch
+            id: filled_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluFilledButton{
    text:"Filled Button"
    onClicked: {
@ -127,32 +124,32 @@ FluScrollablePage{
 }'
    }

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

        FluToggleButton{
            disabled:toggle_button_switch.checked
-            text:"Toggle Button"
+            text: qsTr("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:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluToggleButton{
    text:"Toggle Button"
    onClicked: {
@ -161,36 +158,171 @@ 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()
+            }
+        }
+    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
        Layout.topMargin: 20
-        FluIconButton{
-            iconSource:FluentIcons.ChromeCloseContrast
-            disabled:icon_button_switch.checked
-            iconSize: 15
+        padding: 10
+
+        FluProgressButton{
+            id: btn_progress
+            disabled: progress_button_switch.checked
+            text: qsTr("Progress Button")
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
-            onClicked:{
-                showSuccess("点击IconButton")
+            onClicked: {
+                btn_progress.progress = 0
+                timer_progress.restart()
            }
        }
        FluToggleSwitch{
-            id:icon_button_switch
+            id: progress_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
+        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: 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: qsTr("Loading")
+        }
+    }
+    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: FluImage{ 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: {
@ -199,46 +331,46 @@ FluScrollablePage{
 }'
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
        Layout.topMargin: 20
        FluDropDownButton{
-            disabled:drop_down_button_switch.checked
-            text:"DropDownButton"
+            disabled: drop_down_button_switch.checked
+            text: qsTr("DropDownButton")
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluMenuItem{
-                text:"Menu_1"
+                text: qsTr("Menu_1")
            }
            FluMenuItem{
-                text:"Menu_2"
+                text: qsTr("Menu_2")
            }
            FluMenuItem{
-                text:"Menu_3"
+                text: qsTr("Menu_3")
            }
            FluMenuItem{
-                text:"Menu_4"
+                text: qsTr("Menu_4")
                onClicked: {

                }
            }
        }
        FluToggleSwitch{
-            id:drop_down_button_switch
+            id: drop_down_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluDropDownButton{
    text:"DropDownButton"
    FluMenuItem{
@ -256,42 +388,43 @@ FluScrollablePage{
 }'
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
        Layout.topMargin: 20
        FluRadioButtons{
            spacing: 8
+            disabled: radio_button_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluRadioButton{
                disabled:radio_button_switch.checked
-                text:"Radio Button_1"
+                text: qsTr("Radio Button_1")
            }
            FluRadioButton{
                disabled:radio_button_switch.checked
-                text:"Radio Button_2"
+                text: qsTr("Radio Button_2")
            }
            FluRadioButton{
                disabled:radio_button_switch.checked
-                text:"Radio Button_3"
+                text: qsTr("Radio Button_3")
            }
        }
        FluToggleSwitch{
-            id:radio_button_switch
+            id: radio_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluRadioButton{
    checked:true
    text:"Text Button"
--- a/example/qml/page/T_CalendarPicker.qml
+++ b/example/qml/page/T_CalendarPicker.qml
@ -1,47 +1,33 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"CalendarPicker"
+    title: qsTr("CalendarPicker")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        Layout.topMargin: 20
-        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
+        Layout.preferredHeight: 80
+        padding: 10
        ColumnLayout{
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluCalendarPicker{
+                onAccepted:{
+                    showSuccess(current.toLocaleString())
+                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluCalendarPicker{

 }'
--- a/example/qml/page/T_Captcha.qml
+++ b/example/qml/page/T_Captcha.qml
@ -0,0 +1,59 @@
+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:"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,19 +1,31 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Carousel"
+    title: qsTr("Carousel")

-    FluArea{
+    ListModel{
+        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
-        paddings: 10
-        Layout.topMargin: 20
+        padding: 10
        Column{
            spacing: 15
            anchors{
@ -21,26 +33,112 @@ FluScrollablePage{
                left:parent.left
            }
            FluText{
-                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
+                text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
            }
-            FluCarousel{
-                id:carousel
-                Layout.topMargin: 20
-                Layout.leftMargin: 5
-                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"}])
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
+                }
+                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: -1
+        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: {
-        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"}])
+        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"}]
    }
 }'
    }
--- a/example/qml/page/T_CheckBox.qml
+++ b/example/qml/page/T_CheckBox.qml
@ -1,50 +1,113 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"CheckBox"
+    title: qsTr("CheckBox")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 72
+        padding: 10
+
+        FluText{
+            text: qsTr("A 2-state CheckBox")
+        }
+
        Row{
            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
+            anchors{
+                top: parent.top
+                topMargin: 30
            }
            FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Right"
+                disabled: check_box_switch_two.checked
            }
            FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Left"
+                disabled: check_box_switch_two.checked
+                text: qsTr("Right")
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
+                text: qsTr("Left")
                textRight: false
            }
        }
        FluToggleSwitch{
-            id:check_box_switch
+            id:check_box_switch_two
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        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
@ -0,0 +1,105 @@
+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,69 +1,32 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"ColorPicker"
+    title: qsTr("ColorPicker")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 280
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text:"此颜色组件是Github上的开源项目"
-            }
-            FluTextButton{
-                text:"https://github.com/rshest/qml-colorpicker"
-                onClicked: {
-                    Qt.openUrlExternally(text)
-                }
-            }
-            FluColorView{
-
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluColorView{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-
+        Layout.preferredHeight: 60
+        padding: 10
        RowLayout{
            FluText{
-                text:"点击选择颜色->"
+                text: qsTr("Click to Select a Color - >")
                Layout.alignment: Qt.AlignVCenter
            }
-            FluColorPicker{
-
-            }
+            FluColorPicker{}
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluColorPicker{

 }'
    }

 }
-
--- a/example/qml/page/T_ComboBox.qml
+++ b/example/qml/page/T_ComboBox.qml
@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"ComboBox"
+    title: qsTr("ComboBox")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 80
-        paddings: 5
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
+        padding: 5
        Column{
            spacing: 5
            anchors.verticalCenter: parent.verticalCenter
@ -32,10 +31,34 @@ FluScrollablePage{
        }
    }

-    FluArea{
+    FluFrame {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 80
+        padding: 5
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "disabled=true"
+                x:10
+            }
+            FluComboBox {
+                disabled: true
+                model: ListModel {
+                    id: model_2
+                    ListElement { text: "Banana" }
+                    ListElement { text: "Apple" }
+                    ListElement { text: "Coconut" }
+                }
+            }
+        }
+    }
+
+    FluFrame{
        Layout.fillWidth: true
        height: 80
-        paddings: 10
+        padding: 10
        Layout.topMargin: 20
        Column{
            spacing: 5
@ -46,23 +69,22 @@ FluScrollablePage{
            }
            FluComboBox {
                editable: true
-                font:FluTextStyle.BodyStrong
                model: ListModel {
-                    id: model_2
+                    id: model_3
                    ListElement { text: "Banana" }
                    ListElement { text: "Apple" }
                    ListElement { text: "Coconut" }
                }
                onAccepted: {
                    if (find(editText) === -1)
-                        model_2.append({text: editText})
+                        model_3.append({text: editText})
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluComboBox{
    editable: true
    model: ListModel {
--- a/example/qml/page/T_CustomPlot.qml
+++ b/example/qml/page/T_CustomPlot.qml
@ -0,0 +1,49 @@
+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
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"TimePicker"
+    title: qsTr("DatePicker")

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

 }'
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
        ColumnLayout{
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluText{
-                text:"showYear=false"
+                text: qsTr("showYear=false")
            }
-
            FluDatePicker{
-                showYear:false
-                onCurrentChanged: {
+                showYear: false
+                onAccepted: {
                    showSuccess(current.toLocaleDateString())
                }
            }
@ -61,7 +60,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluDatePicker{
    showYear:false
 }'
--- a/example/qml/page/T_Dialog.qml
+++ b/example/qml/page/T_Dialog.qml
@ -1,23 +1,21 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Dialog"
+    title: qsTr("Dialog")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
        FluButton{
            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Double Button Dialog"
+            text: qsTr("Show Double Button Dialog")
            onClicked: {
                double_btn_dialog.open()
            }
@ -25,48 +23,47 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluContentDialog{
    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
    onNegativeClicked:{
-        showSuccess("点击取消按钮")
+        showSuccess(qsTr("Click the Cancel Button"))
    }
-    positiveText:"确定"
+    positiveText: qsTr("OK")
    onPositiveClicked:{
-        showSuccess("点击确定按钮")
-    }
+        showSuccess(qsTr("Click the OK Button"))
+        }
    }
    dialog.open()'
    }

    FluContentDialog{
        id:double_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
        }
-        positiveText:"确定"
+        positiveText: qsTr("OK")
        onPositiveClicked:{
-            showSuccess("点击确定按钮")
+            showSuccess(qsTr("Click the OK Button"))
        }
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
        Layout.topMargin: 20
        FluButton{
            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Triple Button Dialog"
+            text: qsTr("Show Triple Button Dialog")
            onClicked: {
                triple_btn_dialog.open()
            }
@ -74,45 +71,161 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluContentDialog{
-    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    negativeText:"取消"
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
+    negativeText: qsTr("Cancel")
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
    }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
+    positiveText: qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
    }
-    neutralText:"最小化"
-    onNeutralClicked:{
-        showSuccess("点击最小化按钮")
+    neutralText: qsTr("Minimize")
+    onNeutralClicked: {
+        showSuccess(qsTr("Click Minimize"))
        }
    }
    dialog.open()'
    }

    FluContentDialog{
-        id:triple_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
+        id: triple_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
        }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
        }
-        neutralText:"最小化"
-        onNeutralClicked:{
-            showSuccess("点击最小化按钮")
+        neutralText: qsTr("Minimize")
+        onNeutralClicked: {
+            showSuccess(qsTr("Click Minimize"))
+        }
+    }
+
+    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,19 +1,18 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Expander"
+    title: qsTr("Expander")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
        height: layout_column.height+20
-        paddings: 10
-        Layout.topMargin: 20
+        padding: 10
        Column{
            id:layout_column
            spacing: 15
@ -23,7 +22,7 @@ FluScrollablePage{
            }

            FluExpander{
-                headerText:"打开一个单选框"
+                headerText: qsTr("Open a radio box")
                Layout.topMargin: 20
                Item{
                    anchors.fill: parent
@ -50,7 +49,7 @@ FluScrollablePage{

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

    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluExpander{
-    headerText:"打开一个单选框"
+    headerText: qsTr("Open a radio box")
    Item{
        anchors.fill: parent
        Flickable{
@ -91,7 +98,7 @@ FluScrollablePage{
                width: scrollview.width
                wrapMode: Text.WrapAnywhere
                padding: 14
-                text:"先帝创业未半而中道崩殂，今天下三分......""
+                text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
            }
        }
    }
--- a/example/qml/page/T_FlipView.qml
+++ b/example/qml/page/T_FlipView.qml
@ -1,23 +1,22 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"FlipView"
+    title: qsTr("FlipView")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 340
+        padding: 10
        ColumnLayout{
            anchors.verticalCenter: parent.verticalCenter
            FluText{
-                text:"水平方向的FlipView"
+                text: qsTr("Horizontal FlipView")
            }
            FluFlipView{
                Image{
@ -40,7 +39,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluFlipView{
    Image{
        source: "qrc:/example/res/image/banner_1.jpg"
@ -61,15 +60,15 @@ FluScrollablePage{
 '
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
        height: 340
-        paddings: 10
+        padding: 10
        Layout.topMargin: 20
        ColumnLayout{
            anchors.verticalCenter: parent.verticalCenter
            FluText{
-                text:"垂直方向的FlipView"
+                text: qsTr("Vertical FlipView")
            }
            FluFlipView{
                vertical:true
@ -93,7 +92,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluFlipView{
    vertical:true
    Image{
--- a/example/qml/page/T_FluentPro.qml
+++ b/example/qml/page/T_FluentPro.qml
@ -0,0 +1,65 @@
+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
@ -0,0 +1,80 @@
+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,33 +1,56 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/global"
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../window"
+import "../global"

 FluScrollablePage{

    launchMode: FluPageType.SingleTask
-    animDisabled: true
+    animationEnabled: false
+    header: Item{}

    ListModel{
-        id:model_header
+        id: model_header
        ListElement{
-            icon:"qrc:/example/res/image/ic_home_github.png"
-            title:"FluentUI GitHub"
-            desc:"The latest FluentUI controls and styles for your applications."
-            url:"https://github.com/zhuzichu520/FluentUI"
+            icon: "qrc:/example/res/image/logo_pro.png"
+            title: qsTr("FluentUI Pro")
+            desc: qsTr("The latest FluentUI Pro controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI-Pro-Installer"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        ListElement{
+            icon: "qrc:/example/res/image/ic_home_github.png"
+            title: qsTr("FluentUI GitHub")
+            desc: qsTr("The latest FluentUI controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        ListElement{
+            icon: "qrc:/example/res/image/favicon.ico"
+            title: qsTr("FluentUI Initializr")
+            desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                fluent_Initializr.showDialog()
+            }
        }
    }
-
    Item{
        Layout.fillWidth: true
-        height: 320
+        Layout.preferredHeight: 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{
@ -47,29 +70,19 @@ FluScrollablePage{
                leftMargin: 20
            }
        }
-
-        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:Item{
+        Component{
+            id:com_grallery
+            Item{
                id: control
                width: 220
                height: 240
-                FluItem{
-                    radius: [8,8,8,8]
+                FluShadow{
+                    radius:5
+                    anchors.fill: item_content
+                }
+                FluClip{
+                    id:item_content
+                    radius: [5,5,5,5]
                    width: 200
                    height: 220
                    anchors.centerIn: parent
@ -77,24 +90,21 @@ 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: 8
-                        color:{
-                            if(FluTheme.dark){
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(1,1,1,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0)
-                            }else{
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(0,0,0,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0)
-                            }
-                        }
+                        radius: 5
+                        color:FluTheme.itemHoverColor
+                        visible: item_mouse.containsMouse
+                    }
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:Qt.rgba(0,0,0,0.0)
+                        visible: !item_mouse.containsMouse
                    }
                    ColumnLayout{
                        Image {
@ -117,6 +127,7 @@ FluScrollablePage{
                            Layout.leftMargin: 20
                            color: FluColors.Grey120
                            font.pixelSize: 12
+                            font.family: FluTextStyle.family
                            wrapMode: Text.WrapAnywhere
                        }
                    }
@ -134,25 +145,46 @@ FluScrollablePage{
                        id:item_mouse
                        anchors.fill: parent
                        hoverEnabled: true
-                        onWheel: (wheel)=>{
-                            if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
-                            else scrollbar_header.increase()
-                        }
+                        onWheel:
+                            (wheel)=>{
+                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
+                                else scrollbar_header.increase()
+                            }
                        onClicked: {
-                            Qt.openUrlExternally(model.url)
+                            model.clicked(model)
                        }
                    }
                }
            }
        }
+
+        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
-            FluArea{
+            FluFrame{
                radius: 8
                width: 300
                height: 100
@ -161,31 +193,23 @@ FluScrollablePage{
                    anchors.fill: parent
                    radius: 8
                    color:{
-                        if(FluTheme.dark){
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(1,1,1,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
-                        }else{
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(0,0,0,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
+                        if(item_mouse.containsMouse){
+                            return FluTheme.itemHoverColor
                        }
+                        return FluTheme.itemNormalColor
                    }
                }
                Image{
                    id:item_icon
                    height: 40
                    width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                    anchors{
                        left: parent.left
                        leftMargin: 20
                        verticalCenter: parent.verticalCenter
                    }
                }
-
                FluText{
                    id:item_title
                    text:modelData.title
@ -196,10 +220,9 @@ FluScrollablePage{
                        top: item_icon.top
                    }
                }
-
                FluText{
                    id:item_desc
-                    text:modelData.desc
+                    text:desc
                    color:FluColors.Grey120
                    wrapMode: Text.WrapAnywhere
                    elide: Text.ElideRight
@ -218,7 +241,7 @@ FluScrollablePage{
                    height: 12
                    width: 12
                    radius:  6
-                    color: FluTheme.primaryColor.dark
+                    color: FluTheme.primaryColor
                    anchors{
                        right: parent.right
                        top: parent.top
@ -248,7 +271,7 @@ FluScrollablePage{

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

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

 }
+
--- a/example/qml/page/T_Http.qml
+++ b/example/qml/page/T_Http.qml
@ -1,214 +0,0 @@
-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
@ -0,0 +1,64 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+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)
+        }
+    }
+    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
+                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
+                }
+            }
+        }
+    }
+}
--- a/example/qml/page/T_Image.qml
+++ b/example/qml/page/T_Image.qml
@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Image"
+    title: qsTr("Image")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 260
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 260
+        padding: 10
        Column{
            spacing: 15
            anchors{
@ -26,7 +25,7 @@ FluScrollablePage{
                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
                onStatusChanged:{
                    if(status === Image.Error){
-                        showError("图片加载失败，请重新加载")
+                        showError(qsTr("The image failed to load, please reload"))
                    }
                }
                clickErrorListener: function(){
@ -37,7 +36,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluImage{
    width: 400
    height: 300
--- a/example/qml/page/T_InfoBar.qml
+++ b/example/qml/page/T_InfoBar.qml
@ -1,19 +1,22 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"InfoBar"
+    title: qsTr("InfoBar")

-    FluArea{
+    property var info1
+    property var info2
+    property var info3
+
+    FluFrame{
        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 240
-        paddings: 10
+        Layout.preferredHeight: 350
+        padding: 10
        ColumnLayout{
            spacing: 14
            anchors{
@ -21,29 +24,81 @@ FluScrollablePage{
                left: parent.left
            }
            FluButton{
-                text:"Info"
+                text: qsTr("Info")
                onClicked: {
-                    showInfo("这是一个Info样式的InfoBar")
+                    showInfo(qsTr("This is an InfoBar in the Info Style"))
                }
            }
            FluButton{
-                text:"Warning"
+                text: qsTr("Warning")
                onClicked: {
-                    showWarning("这是一个Warning样式的InfoBar")
+                    showWarning(qsTr("This is an InfoBar in the Warning Style"))
                }
            }
            FluButton{
                text:"Error"
                onClicked: {
-                    showError("这是一个Error样式的InfoBar")
+                    showError(qsTr("This is an InfoBar in the Error Style"))
                }
            }
            FluButton{
                text:"Success"
                onClicked: {
-                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
                }
            }
+            FluButton{
+                text: qsTr("InfoBar that needs to be turned off manually")
+                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("info1")
+                    onClicked: {
+                        if(info1) {
+                            info1.close()
+                            return
+                        }
+                        info1 = showInfo(qsTr("This is an '%1'").arg("info1"), 0)
+                        info1.close()
+                    }
+                }
+                FluButton{
+                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info2")
+                    onClicked: {
+                        if(info2) {
+                            info2.close()
+                            return
+                        }
+                        info2 = showInfo(qsTr("This is an '%1'").arg("info2"), 0)
+                    }
+                }
+                FluButton{
+                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info3")
+                    onClicked: {
+                        if(info3) {
+                            info3.close()
+                            return
+                        }
+                        info3 = showInfo(qsTr("This is an '%1'").arg("info3"), 0)
+                    }
+                }
+                FluButton{
+                    text: qsTr("clear all info")
+                    onClicked: {
+                        clearAllInfo()
+                    }
+                }
+            }
+
            FluButton{
                text:"Loading"
                onClicked: {
@ -54,13 +109,18 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'showInfo("这是一个Info样式的InfoBar")
+        Layout.topMargin: -6
+        code:`
+showInfo(qsTr("This is an InfoBar in the Info Style"))

-showWarning("这是一个Warning样式的InfoBar")
+showWarning(qsTr("This is an InfoBar in the Warning Style"))

-showError("这是一个Error样式的InfoBar")
+showError(qsTr("This is an InfoBar in the Error Style"))

-showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
+showSuccess(qsTr("This is an InfoBar in the Success Style"))
+
+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
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Menu"
+    title: qsTr("Menu")

    FluMenu {
        id:menu
@ -16,36 +16,43 @@ FluScrollablePage{
        Action { text: qsTr("Open...") }
        Action { text: qsTr("Save") }
        FluMenuSeparator { }
-        Action {
+        FluMenuItem{
            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("Disable")
+                showError(qsTr("Disable"))
            }
        }
        FluMenuSeparator { }
        Action { text: qsTr("Check");checkable: true;checked: true}
        FluMenu{
-            title: "Save As..."
+            title: qsTr("Save As...")
            Action { text: qsTr("Doc") }
            Action { text: qsTr("PDF") }
        }
    }


-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 100
+        padding: 10
        Column{
-            id:layout_column
+            id: layout_column
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
@ -53,11 +60,11 @@ FluScrollablePage{
            }

            FluText{
-                text:"Menu"
+                text: qsTr("Menu")
            }

            FluButton{
-                text:"Show Menu Popup"
+                text: qsTr("Show Menu Popup")
                Layout.topMargin: 20
                onClicked:{
                    menu.popup()
@ -70,7 +77,7 @@ FluScrollablePage{

    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluMenu{
    id:menu
    FluMenuItem:{
@ -91,10 +98,10 @@ menu.popup()
    }


-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
@ -104,7 +111,7 @@ menu.popup()
            }

            FluText{
-                text:"MenuBar"
+                text: qsTr("MenuBar")
            }

            FluMenuBar {
@ -121,7 +128,7 @@ menu.popup()
                        enabled:false
                    }
                    FluMenu{
-                        title: "Save As..."
+                        title: qsTr("Save As...")
                        Action { text: qsTr("Doc") }
                        Action { text: qsTr("PDF") }
                    }
@ -143,7 +150,7 @@ menu.popup()

    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluMenuBar{
    id:menu
    FluMenu:{
@ -160,8 +167,4 @@ menu.popup()
 menu.popup()
 '
    }
-
-
-
-
 }
--- a/example/qml/page/T_MultiWindow.qml
+++ b/example/qml/page/T_MultiWindow.qml
@ -1,30 +1,30 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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{

    property string password: ""
-    property var loginPageRegister: registerForWindowResult("/login")

-    title:"MultiWindow"
+    title: qsTr("MultiWindow")
+
+    FluWindowResultLauncher{
+        id:loginResultLauncher
+        path: "/login"
+        onResult:
+            (data)=>{
+                password = data.password
+            }

-    Connections{
-        target: loginPageRegister
-        function onResult(data)
-        {
-            password = data.password
-        }
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 86
+        padding: 10
        Column{
            spacing: 15
            anchors{
@ -32,21 +32,21 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:"<font color='red'>Standard</font>模式窗口，每次都会创建新窗口"
+                text: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
            }
            FluButton{
-                text:"点击创建窗口"
+                text: qsTr("Create Window")
                onClicked: {
-                    FluApp.navigate("/standardWindow")
+                    FluRouter.navigate("/standardWindow")
                }
            }
        }
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 86
-        paddings: 10
+        Layout.preferredHeight: 86
+        padding: 10
        Layout.topMargin: 10
        Column{
            spacing: 15
@ -55,22 +55,22 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:"<font color='red'>SingleTask</font>模式窗口，如果窗口存在，这激活该窗口"
+                text: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
                textFormat: Text.RichText
            }
            FluButton{
-                text:"点击创建窗口"
+                text: qsTr("Create Window")
                onClicked: {
-                    FluApp.navigate("/singleTaskWindow")
+                    FluRouter.navigate("/singleTaskWindow")
                }
            }
        }
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 86
-        paddings: 10
+        Layout.preferredHeight: 86
+        padding: 10
        Layout.topMargin: 10
        Column{
            spacing: 15
@ -79,19 +79,19 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:"<font color='red'>SingleInstance</font>模式窗口，如果窗口存在，则销毁窗口，然后新建窗口"
+                text: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
            }
            FluButton{
-                text:"点击创建窗口"
+                text: qsTr("Create Window")
                onClicked: {
-                    FluApp.navigate("/singleInstanceWindow")
+                    FluRouter.navigate("/singleInstanceWindow")
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluWindow{
  //launchMode: FluWindowType.Standard
  //launchMode: FluWindowType.SingleTask
@ -101,10 +101,10 @@ FluScrollablePage{
    }


-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
@ -113,32 +113,32 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:"页面跳转，不携带任何参数"
+                text: qsTr("Create the window without carrying any parameters")
            }
            FluButton{
-                text:"点击跳转"
+                text: qsTr("Create Window")
                onClicked: {
-                    FluApp.navigate("/about")
+                    FluRouter.navigate("/about")
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluButton{
-    text:"点击跳转"
+    text: qsTr("Create Window")
    onClicked: {
-        FluApp.navigate("/about")
+        FluRouter.navigate("/about")
    }
 }
 '
    }

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

        Column{
@ -148,36 +148,35 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:"页面跳转，并携带参数用户名：zhuzichu"
+                text: qsTr("Create a window with the parameter username: zhuzichu")
            }
            FluButton{
-                text:"点击跳转到登录"
+                text: qsTr("Create Window")
                onClicked: {
-                    loginPageRegister.launch({username:"zhuzichu"})
+                    loginResultLauncher.launch({username:"zhuzichu"})
                }
            }
            FluText{
-                text:"登录窗口返回过来的密码->"+password
+                text:qsTr("Login Window Returned Password - >")+password
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'property var loginPageRegister: registerForWindowResult("/login")
-
-Connections{
-    target: loginPageRegister
-    function onResult(data)
-    {
-        password = data.password
-    }
+        Layout.topMargin: -6
+        code:'FluWindowResultLauncher{
+    id:loginResultLauncher
+    path: "/login"
+    onResult:
+        (data)=>{
+            password = data.password
+     }
 }

 FluButton{
-    text:"点击跳转"
+    text: qsTr("Create Window")
    onClicked: {
-        loginPageRegister.launch({username:"zhuzichu"})
+        loginResultLauncher.launch({username:"zhuzichu"})
    }
 }
 '
--- a/example/qml/page/T_Network.qml
+++ b/example/qml/page/T_Network.qml
@ -0,0 +1,560 @@
+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
@ -0,0 +1,26 @@
+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,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/component"
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import "../component"
+import FluentUI 1.0

 FluScrollablePage{

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

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 200
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 200
+        padding: 10
        ColumnLayout{
            spacing: 20
            anchors.verticalCenter: parent.verticalCenter
@ -37,7 +36,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        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
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Pivot"
+    title: qsTr("Pivot")

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

        FluPivot{
            anchors.fill: parent
            currentIndex: 2
+
            FluPivotItem{
-                title:"All"
+                title: qsTr("All")
                contentItem:FluText{
-                    text:"All emails go here."
+                    text: qsTr("All emails go here.")
                }
            }
            FluPivotItem{
-                title:"Unread"
-                contentItem:FluText{
-                    text:"Unread emails go here."
+                title: qsTr("Unread")
+                contentItem: FluText{
+                    text: qsTr("Unread emails go here.")
                }
            }
            FluPivotItem{
-                title:"Flagged"
-                contentItem:FluText{
-                    text:"Flagged emails go here."
+                title: qsTr("Flagged")
+                contentItem: FluText{
+                    text: qsTr("Flagged emails go here.")
                }
            }
            FluPivotItem{
-                title:"Urgent"
-                contentItem:FluText{
-                    text:"Urgent emails go here."
+                title: qsTr("Urgent")
+                contentItem: FluText{
+                    text: qsTr("Urgent emails go here.")
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluPivot{
    anchors.fill: parent
    FluPivotItem:{
-        text:"All"
+        text: qsTr("All")
        contentItem: FluText{
-            text:"All emails go here."
+            text: qsTr("All emails go here.")
        }
    }
    FluPivotItem:{
-        text:"Unread"
+        text: qsTr("Unread")
        contentItem: FluText{
-            text:"Unread emails go here."
+            text: qsTr("Unread emails go here.")
        }
    }
    FluPivotItem:{
-        text:"Flagged"
+        text: qsTr("Flagged")
        contentItem: FluText{
-            text:"Flagged emails go here."
+            text: qsTr("Flagged emails go here.")
        }
    }
    FluPivotItem:{
-        text:"Urgent"
+        text: qsTr("Urgent")
        contentItem: FluText{
-            text:"Urgent emails go here."
+            text: qsTr("Urgent emails go here.")
        }
    }
 }
--- a/example/qml/page/T_Progress.qml
+++ b/example/qml/page/T_Progress.qml
@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Progress"
+    title: qsTr("Progress")

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

        ColumnLayout{
            spacing: 10
@ -32,7 +31,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluProgressBar{

 }
@ -42,11 +41,11 @@ FluProgressRing{
 '
    }

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

        ColumnLayout{
            spacing: 10
@ -88,7 +87,7 @@ FluProgressRing{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluProgressBar{
    indeterminate: false
 }
--- a/example/qml/page/T_QRCode.qml
+++ b/example/qml/page/T_QRCode.qml
@ -0,0 +1,101 @@
+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:"text:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluTextBox{
+            id:text_box
+            text:"会磨刀的小猪"
+            Layout.preferredWidth: 240
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text:"color:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+            current: Qt.rgba(0,0,0,1)
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text:"bgColor:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:bgcolor_picker
+            current: Qt.rgba(1,1,1,1)
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text:"margins:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_margins
+            from:0
+            to:80
+            value: 0
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text:"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,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"RadioButton"
+    title: qsTr("RadioButton")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
        Row{
            spacing: 30
            anchors.verticalCenter: parent.verticalCenter
@ -22,68 +21,67 @@ FluScrollablePage{
            }
            FluRadioButton{
                disabled: radio_button_switch.checked
-                text:"Right"
+                text: qsTr("Right")
            }
            FluRadioButton{
                disabled: radio_button_switch.checked
-                text:"Left"
+                text: qsTr("Left")
                textRight: false
            }
        }
        FluToggleSwitch{
-            id:radio_button_switch
+            id: radio_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluRadioButton{
    text:"Text"
 }'
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 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{
-                disabled: radio_button_switch2.checked
-                text:"Radio Button_1"
+                text: qsTr("Radio Button_1")
            }
            FluRadioButton{
-                disabled: radio_button_switch2.checked
-                text:"Radio Button_2"
+                text: qsTr("Radio Button_2")
            }
            FluRadioButton{
-                disabled: radio_button_switch2.checked
-                text:"Radio Button_3"
+                text: qsTr("Radio Button_3")
            }
        }
        FluToggleSwitch{
-            id:radio_button_switch2
+            id: radio_button_switch2
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluRadioButtons{
    spacing: 8
    FluRadioButton{
@ -98,4 +96,106 @@ 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,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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: "RatingControl"
+    title: qsTr("RatingControl")

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

        Column {
            spacing: 10
@ -27,7 +26,7 @@ FluScrollablePage {

    CodeExpander {
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code: 'FluRatingControl{

 }'
--- a/example/qml/page/T_Rectangle.qml
+++ b/example/qml/page/T_Rectangle.qml
@ -1,27 +1,25 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Rectangle"
+    title: qsTr("Rectangle")

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

        Column{
            spacing: 15
            anchors{
-                verticalCenter: parent.verticalCenter
                left: parent.left
+                verticalCenter: parent.verticalCenter
            }
-
            RowLayout{
                Layout.topMargin: 20
                FluRectangle{
@ -61,87 +59,15 @@ 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: -1
+        Layout.topMargin: -6
        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
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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{
    launchMode: FluPageType.SingleTop
    FluRemoteLoader{
        anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+        source: "https://zhu-zichu.gitee.io/Qt_174_RemoteLoader.qml"
    }
 }
--- a/example/qml/page/T_Settings.qml
+++ b/example/qml/page/T_Settings.qml
@ -1,20 +1,95 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+import "../global"

 FluScrollablePage{

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

-    FluArea{
+    FluEvent{
+        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
-        paddings: 10
+        padding: 10

        ColumnLayout{
            spacing: 5
@ -23,13 +98,13 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:lang.dark_mode
+                text: qsTr("Dark Mode")
                font: FluTextStyle.BodyStrong
                Layout.bottomMargin: 4
            }
            Repeater{
-                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
-                delegate:  FluRadioButton{
+                model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("Dark"),mode:FluThemeType.Dark}]
+                delegate: FluRadioButton{
                    checked : FluTheme.darkMode === modelData.mode
                    text:modelData.title
                    clickListener:function(){
@ -40,11 +115,11 @@ FluScrollablePage{
        }
    }

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

        ColumnLayout{
            spacing: 5
@ -53,28 +128,38 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:lang.navigation_view_display_mode
+                text:qsTr("Navigation View Display Mode")
                font: FluTextStyle.BodyStrong
                Layout.bottomMargin: 4
            }
            Repeater{
-                model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
+                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}]
                delegate: FluRadioButton{
-                    checked : MainEvent.displayMode===modelData.mode
-                    text:modelData.title
+                    text: modelData.title
+                    checked: GlobalModel.displayMode === modelData.mode
                    clickListener:function(){
-                        MainEvent.displayMode = modelData.mode
+                        GlobalModel.displayMode = modelData.mode
                    }
                }
            }
        }
    }

-    FluArea{
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
+    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 80
-        paddings: 10
+        padding: 10

        ColumnLayout{
            spacing: 10
@ -82,27 +167,25 @@ FluScrollablePage{
                top: parent.top
                left: parent.left
            }
-
            FluText{
-                text:lang.locale
+                text:qsTr("Language")
                font: FluTextStyle.BodyStrong
                Layout.bottomMargin: 4
            }
-
            Flow{
                spacing: 5
                Repeater{
-                    model: ["Zh","En"]
+                    model: TranslateHelper.languages
                    delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: TranslateHelper.current === modelData
                        text:modelData
                        clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            TranslateHelper.current = modelData
+                            dialog_restart.open()
                        }
                    }
                }
            }
        }
    }
-
 }
--- a/example/qml/page/T_Sheet.qml
+++ b/example/qml/page/T_Sheet.qml
@ -0,0 +1,90 @@
+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
@ -0,0 +1,42 @@
+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,50 +1,59 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/component"
-import FluentUI
+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:"Slider"
+    title: qsTr("Slider")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        FluSlider{
-            anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredHeight: 200
+        padding: 10
+
+        Row{
+            spacing: 30
+            FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluSlider{
    value:50
 }'
    }

-    FluArea{
+
+    FluFrame{
        Layout.fillWidth: true
-        height: 200
-        paddings: 10
+        Layout.preferredHeight: 200
        Layout.topMargin: 20
-        FluSlider{
-            orientation: Qt.Vertical
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
+        padding: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluSlider{
+        Layout.topMargin: -6
+        code:'FluRangeSlider{
    orientation: Qt.Vertical
-    value:50
 }'
    }
-
-
 }
+
--- a/example/qml/page/T_SplitLayout.qml
+++ b/example/qml/page/T_SplitLayout.qml
@ -0,0 +1,83 @@
+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:"orientation:"
+        }
+        FluDropDownButton{
+            id:btn_orientation
+            Layout.preferredWidth: 120
+            text:"Horizontal"
+            FluMenuItem{
+                text:"Horizontal"
+                onClicked: {
+                    btn_orientation.text = text
+                    split_layout.orientation = Qt.Horizontal
+                }
+            }
+            FluMenuItem{
+                text:"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: "Page 1"
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            id: centerItem
+            SplitView.minimumWidth: 50
+            SplitView.minimumHeight: 50
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            FluText {
+                text: "Page 2"
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            implicitWidth: 200
+            implicitHeight: 200
+            FluText {
+                text: "Page 3"
+                anchors.centerIn: parent
+            }
+        }
+    }
+}
--- a/example/qml/page/T_StaggeredLayout.qml
+++ b/example/qml/page/T_StaggeredLayout.qml
@ -0,0 +1,56 @@
+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,20 +1,19 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"StatusView"
+    title: qsTr("StatusLayout")

-    FluArea{
+    FluFrame{
        id:layout_actions
        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
+        Layout.preferredHeight: 50
+        padding: 10
        RowLayout{
            spacing: 14
            FluDropDownButton{
@ -25,60 +24,60 @@ FluScrollablePage{
                    text:"Loading"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Loading
+                        status_view.statusMode = FluStatusLayoutType.Loading
                    }
                }
                FluMenuItem{
                    text:"Empty"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Empty
+                        status_view.statusMode = FluStatusLayoutType.Empty
                    }
                }
                FluMenuItem{
                    text:"Error"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Error
+                        status_view.statusMode = FluStatusLayoutType.Error
                    }
                }
                FluMenuItem{
                    text:"Success"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Success
+                        status_view.statusMode = FluStatusLayoutType.Success
                    }
                }
            }
        }
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 10
-        height: 380
-        paddings: 10
-        FluStatusView{
+        Layout.preferredHeight: 380
+        padding: 10
+        FluStatusLayout{
            id:status_view
            anchors.fill: parent
            onErrorClicked:{
-                showError("点击重新加载")
+                status_view.statusMode = FluStatusLayoutType.Loading
            }
            Rectangle {
                anchors.fill: parent
-                color:FluTheme.primaryColor.dark
+                color:FluTheme.primaryColor
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluStatusView{
+        Layout.topMargin: -6
+        code:'FluStatusLayout{
    anchors.fill: parent
-    statusMode: FluStatusViewType.Loading
+    statusMode: FluStatusLayoutType.Loading
    Rectangle{
        anchors.fill: parent
-        color:FluTheme.primaryColor.dark
+        color:FluTheme.primaryColor
    }
 }'
    }
--- a/example/qml/page/T_TabView.qml
+++ b/example/qml/page/T_TabView.qml
@ -1,26 +1,26 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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{

    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]

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

    Component{
        id:com_page
        Rectangle{
            anchors.fill: parent
-            color: argument
+            color: argument.normal
        }
    }

    function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
+        tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
    }

    Component.onCompleted: {
@ -29,11 +29,10 @@ FluScrollablePage{
        newTab()
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
+        Layout.preferredHeight: 50
+        padding: 10
        RowLayout{
            spacing: 14
            FluDropDownButton{
@ -67,10 +66,10 @@ FluScrollablePage{
                text:"Always"
                Layout.preferredWidth: 120
                FluMenuItem{
-                    text:"Nerver"
+                    text:"Never"
                    onClicked: {
                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
+                        tab_view.closeButtonVisibility = FluTabViewType.Never
                    }
                }
                FluMenuItem{
@ -91,11 +90,11 @@ FluScrollablePage{
        }
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 15
-        height: 400
-        paddings: 10
+        Layout.preferredHeight: 400
+        padding: 10
        FluTabView{
            id:tab_view
            onNewPressed:{
@ -105,7 +104,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluTabView{
    anchors.fill: parent
    Component.onCompleted: {
@ -126,5 +125,4 @@ FluScrollablePage{
 }
 '
    }
-
 }
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@ -1,45 +1,580 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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"

 FluContentPage{

-    title:"TableView"
+    id:root
+    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:"删除"
+                    text: qsTr("Delete")
                    onClicked: {
                        table_view.closeEditor()
-                        tableModel.removeRow(row)
+                        table_view.removeRow(row)
                    }
                }
                FluFilledButton{
-                    text:"编辑"
+                    text: qsTr("Edit")
                    onClicked: {
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                        var obj = table_view.getRow(row)
+                        obj.name = "12345"
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
                    }
                }
            }
        }
    }

-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
+
+    Component{
+        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() * numbers.length);
-            return numbers[randomIndex];
+            var randomIndex = Math.floor(Math.random() * ages.length);
+            return ages[randomIndex];
        }
        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
        function getRandomName(){
@ -56,122 +591,30 @@ 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({
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                height:42,
-                                minimumHeight:42,
-                                maximumHeight:300,
-                                action:com_action
-                            })
+            dataSource.push(genTestObject())
        }
        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,31 +1,30 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Text"
+    title: qsTr("Text")

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

        FluCopyableText{
-            text: "这是一个可以支持复制的Text"
+            text: qsTr("This is a text that can be copied")
            anchors.verticalCenter: parent.verticalCenter
        }

    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluCopyableText{
-    text:"这是一个可以支持复制的Text"
+    text: qsTr("This is a text that can be copied")
 }'
    }

--- a/example/qml/page/T_TextBox.qml
+++ b/example/qml/page/T_TextBox.qml
@ -1,24 +1,22 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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{

-    launchMode: FluPageType.SingleInstance
+    title: qsTr("TextBox")

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

        FluTextBox{
-            placeholderText: "单行输入框"
-            disabled:text_box_switch.checked
+            placeholderText: qsTr("Single-line Input Box")
+            disabled: text_box_switch.checked
            cleanEnabled: true
            anchors{
                verticalCenter: parent.verticalCenter
@ -27,30 +25,30 @@ FluScrollablePage{
        }

        FluToggleSwitch{
-            id:text_box_switch
+            id: text_box_switch
            anchors{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluTextBox{
-    placeholderText:"单行输入框"
+    placeholderText: qsTr("Single-line Input Box")
 }'
    }

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

        FluPasswordBox{
-            placeholderText: "请输入密码"
+            placeholderText: qsTr("Please enter your password")
            disabled:password_box_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
@ -63,28 +61,27 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluPasswordBox{
-    placeholderText:"请输入密码"
+    placeholderText: qsTr("Please enter your password")
 }'
    }

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

        FluMultilineTextBox{
-            id:multiine_textbox
-            placeholderText: "多行输入框"
-            disabled:text_box_multi_switch.checked
+            id: multiine_textbox
+            placeholderText: qsTr("Multi-line Input Box")
+            disabled: text_box_multi_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
@ -97,26 +94,26 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluMultilineTextBox{
-    placeholderText:"多行输入框"
+    placeholderText: qsTr("Multi-line Input Box")
 }'
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
        Layout.topMargin: 20
        FluAutoSuggestBox{
-            placeholderText: "AutoSuggestBox"
-            items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.checked
+            placeholderText: qsTr("AutoSuggestBox")
+            items: generateRandomNames(100)
+            disabled: text_box_suggest_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
@ -128,21 +125,21 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluAutoSuggestBox{
-    placeholderText:"AutoSuggestBox"
+    placeholderText: qsTr("AutoSuggestBox")
 }'
    }

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
        Layout.topMargin: 20
        FluSpinBox{
            disabled: spin_box_switch.checked
@ -152,17 +149,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id:spin_box_switch
+            id: spin_box_switch
            anchors{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluSpinBox{

 }'
--- a/example/qml/page/T_Theme.qml
+++ b/example/qml/page/T_Theme.qml
@ -1,38 +1,45 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Theme"
+    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+    id: root
+    title: qsTr("Theme")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 270
-        paddings: 10
+        Layout.fillHeight: true
+        padding: 10
+
        ColumnLayout{
            spacing:0
            anchors{
                left: parent.left
            }
-            RowLayout{
+            FluText{
+                text: qsTr("Theme colors")
                Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
                Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
+                    model: root.colorData
+                    delegate:  Rectangle{
                        width: 42
                        height: 42
-                        radius: [4,4,4,4]
+                        radius: 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.primaryColor
+                            visible: modelData === FluTheme.accentColor
                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                        }
                        MouseArea{
@ -40,14 +47,43 @@ FluScrollablePage{
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: {
-                                FluTheme.primaryColor = modelData
+                                FluTheme.accentColor = 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:"夜间模式"
+                text: qsTr("Dark Mode")
                Layout.topMargin: 20
            }
            FluToggleSwitch{
@ -62,7 +98,7 @@ FluScrollablePage{
                }
            }
            FluText{
-                text:"native文本渲染"
+                text: qsTr("Native Text")
                Layout.topMargin: 20
            }
            FluToggleSwitch{
@ -73,22 +109,90 @@ FluScrollablePage{
                }
            }
            FluText{
-                text:"开启动画效果"
+                text: qsTr("Open Animation")
                Layout.topMargin: 20
            }
            FluToggleSwitch{
                Layout.topMargin: 5
-                checked: FluTheme.enableAnimation
+                checked: FluTheme.animationEnabled
                onClicked: {
-                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                    FluTheme.animationEnabled = !FluTheme.animationEnabled
+                }
+            }
+            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 === "dwm-blur"
+                text: qsTr("window tintOpacity")
+                Layout.topMargin: 20
+            }
+            FluSlider{
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === "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: -1
-        code:'FluTheme.primaryColor = FluColors.Orange
+        Layout.topMargin: -6
+        code:'FluTheme.accentColor = FluColors.Orange

 FluTheme.dark = true

--- a/example/qml/page/T_TimePicker.qml
+++ b/example/qml/page/T_TimePicker.qml
@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"TimePicker"
+    title: qsTr("TimePicker")
    launchMode: FluPageType.SingleInstance
-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10

        ColumnLayout{

@ -23,11 +22,18 @@ FluScrollablePage{
            }

            FluText{
-                text:"hourFormat=FluTimePickerType.H"
+                text: qsTr("hourFormat=FluTimePickerType.H")
            }

            FluTimePicker{
-                onCurrentChanged: {
+                current: new Date()
+                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")))
                }
            }
@ -36,17 +42,17 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluTimePicker{

 }'
    }

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

        ColumnLayout{

@ -56,12 +62,18 @@ FluScrollablePage{
            }

            FluText{
-                text:"hourFormat=FluTimePickerType.HH"
+                text: qsTr("hourFormat=FluTimePickerType.HH")
            }

            FluTimePicker{
                hourFormat:FluTimePickerType.HH
-                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")))
                }
            }
@ -70,7 +82,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluTimePicker{
    hourFormat:FluTimePickerType.HH
 }'
--- a/example/qml/page/T_Timeline.qml
+++ b/example/qml/page/T_Timeline.qml
@ -0,0 +1,169 @@
+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:"mode:"
+        }
+        FluDropDownButton{
+            id: btn_mode
+            Layout.preferredWidth: 100
+            text: "Alternate"
+            FluMenuItem{
+                text: "Left"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Left
+                }
+            }
+            FluMenuItem{
+                text: "Right"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Right
+                }
+            }
+            FluMenuItem{
+                text: "Alternate"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Alternate
+                }
+            }
+        }
+    }
+
+    FluTimeline{
+        id: time_line
+        Layout.fillWidth: true
+        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,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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:"ToggleSwitch"
+    title: qsTr("ToggleSwitch")

-    FluArea{
+    FluFrame{
        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
        Row{
            spacing: 30
            anchors.verticalCenter: parent.verticalCenter
@ -22,26 +21,26 @@ FluScrollablePage{
            }
            FluToggleSwitch{
                disabled: toggle_switch.checked
-                text:"Right"
+                text: qsTr("Right")
            }
            FluToggleSwitch{
                disabled: toggle_switch.checked
-                text:"Left"
+                text: qsTr("Left")
                textRight: false
            }
        }
        FluToggleSwitch{
-            id:toggle_switch
+            id: toggle_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text:"Disabled"
+            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluToggleSwitch{
    text:"Text"
 }'
--- a/example/qml/page/T_Tooltip.qml
+++ b/example/qml/page/T_Tooltip.qml
@ -1,24 +1,23 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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:"Tooltip"
+    title: qsTr("Tooltip")

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

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

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

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

        Column{
            spacing: 5
@ -66,13 +65,13 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:"给一个Button添加Tooltip效果"
+                text: qsTr("Add a Tooltip pop-up to a Button")
            }
            FluButton{
                id:button_1
-                text:"删除"
+                text: qsTr("Delete")
                onClicked:{
-                    showSuccess("点击一个Button")
+                    showSuccess(qsTr("Click Button"))
                }
                FluTooltip{
                    visible: button_1.hovered
@ -84,17 +83,17 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
        code:'FluButton{
-    id:button_1
-    text:"删除"
+    id: button_1
+    text: qsTr("Delete")
    FluTooltip{
        visible: button_1.hovered
        text:button_1.text
        delay: 1000
    }
    onClicked:{
-        showSuccess("点击一个Button")
+        showSuccess(qsTr("Click Button"))
    }
 }'
    }
--- a/example/qml/page/T_Tour.qml
+++ b/example/qml/page/T_Tour.qml
@ -0,0 +1,79 @@
+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,156 +1,205 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+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 {
+FluContentPage {

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

-    function randomName() {
-        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
-        return names[Math.floor(Math.random() * names.length)]
-    }

-    function randomCompany() {
-        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
-        return companies[Math.floor(Math.random() * companies.length)]
-    }
-
-    function randomDepartment() {
-        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
-        return departments[Math.floor(Math.random() * departments.length)]
-    }
-
-    function createEmployee() {
-        var name = randomName()
-        return tree_view.createItem(name, false)
-    }
-
-    function createSubtree(numEmployees) {
-        var employees = []
-        for (var i = 0; i < numEmployees; i++) {
-            employees.push(createEmployee())
+    function treeData(){
+        const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length)
+            return names[randomIndex]
        }
-        return tree_view.createItem(randomDepartment(), true, employees)
-    }
-
-    function createOrg(numLevels, numSubtrees, numEmployees) {
-        if (numLevels === 0) {
-            return []
+        const addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length)
+            return addresses[randomIndex]
        }
-        var subtrees = []
-        for (var i = 0; i < numSubtrees; i++) {
-            subtrees.push(createSubtree(numEmployees))
+        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];
        }
-        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
-    }
-
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_selection_model
-                Layout.preferredWidth: 140
-                text:"None"
-                FluMenuItem{
-                    text:"None"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.Equal
-                    }
-                }
-                FluMenuItem{
-                    text:"Single"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.SizeToContent
-                    }
-                }
-                FluMenuItem{
-                    text:"Muiltple"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.Compact
-                    }
+        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);
            }
-            FluFilledButton{
-                text:"获取选中的数据"
-                onClicked: {
-                    if(tree_view.selectionMode === FluTreeViewType.None){
-                        showError("当前非选择模式,没有选中的数据")
-                    }
-                    if(tree_view.selectionMode === FluTreeViewType.Single){
-                        if(!tree_view.signleData()){
-                            showError("没有选中数据")
-                            return
+            return list;
+        };
+        return dig();
+    }
+
+    Component{
+        id:com_avatar
+        Item{
+            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
                        }
-                        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(","))
+                        return ""
                    }
+                    sourceSize: Qt.size(80,80)
                }
            }
        }
    }
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        paddings: 10
-        height: 400
-        FluTreeView{
-            id:tree_view
-            width:240
+    FluFrame{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 10
+        }
+        height: 80
+        clip: true
+        Row{
+            spacing: 12
            anchors{
-                top:parent.top
-                left:parent.left
-                bottom:parent.bottom
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
            }
-            onItemClicked:
-                (model)=>{
-                    showSuccess(model.text)
+            Column{
+                anchors.verticalCenter: parent.verticalCenter
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: "cellHeight:"
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_cell_height
+                        value: 38
+                        from: 38
+                        to:100
+                    }
+                }
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: "depthPadding:"
+                        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:"showLine"
+                    checked: false
+                }
+                FluToggleSwitch{
+                    id: switch_checkable
+                    text:"checkable"
+                    checked: false
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluButton{
+                    text: "all expand"
+                    onClicked: {
+                        tree_view.allExpand()
+                    }
+                }
+                FluButton{
+                    text: "all collapse"
+                    onClicked: {
+                        tree_view.allCollapse()
+                    }
+                }
+            }
+            FluButton{
+                text: "print selection model"
+                onClicked: {
+                    var printData = []
+                    var data = tree_view.selectionModel();
+                    console.debug(data.length)
+                    for(var i = 0; i <= data.length-1 ; i++){
+                        const newObj = Object.assign({}, data[i].data);
+                        delete newObj["__parent"];
+                        delete newObj["children"];
+                        printData.push(newObj)
+                    }
+                    console.debug(JSON.stringify(printData))
                }
-
-            Component.onCompleted: {
-                var org = createOrg(3, 3, 3)
-                createItem()
-                updateData(org)
            }
        }
    }

-    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)
+    FluTreeView{
+        id:tree_view
+        anchors{
+            left: parent.left
+            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
+        }
    }
 }
-'
-    }
-
-
-}
--- a/example/qml/page/T_Typography.qml
+++ b/example/qml/page/T_Typography.qml
@ -1,24 +1,23 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0

 FluContentPage {

    property real textScale: 1

-    title: "Typography"
+    title: qsTr("Typography")
    rightPadding: 10

-    FluArea{
+    FluFrame{
        anchors{
            top:parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
-            topMargin: 20
        }
-        paddings: 10
+        padding: 10
        ColumnLayout{
            spacing: 0
            scale: textScale
--- a/example/qml/page/T_Watermark.qml
+++ b/example/qml/page/T_Watermark.qml
@ -1,17 +1,16 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+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"

 FluContentPage{

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

-    FluArea{
+    FluFrame{
        anchors.fill: parent
-        anchors.topMargin: 20

        ColumnLayout{
            anchors{
@ -23,23 +22,24 @@ FluContentPage{
                spacing: 10
                Layout.topMargin: 14
                FluText{
-                    text:"text:"
+                    text: "text:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluTextBox{
-                    id:text_box
-                    text:"会磨刀的小猪"
+                    id: text_box
+                    text: "会磨刀的小猪"
+                    Layout.preferredWidth: 240
                }
            }

            RowLayout{
                spacing: 10
                FluText{
-                    text:"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:"gapX:"
+                    text: "gapX:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
@ -59,18 +59,18 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text:"gapY:"
+                    text: "gapY:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id:slider_gap_y
+                    id: slider_gap_y
                    value: 100
                }
            }
            RowLayout{
                spacing: 10
                FluText{
-                    text:"offsetX:"
+                    text: "offsetX:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
@ -81,22 +81,22 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text:"offsetY:"
+                    text: "offsetY:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id:slider_offset_y
+                    id: slider_offset_y
                    value: 50
                }
            }
            RowLayout{
                spacing: 10
                FluText{
-                    text:"rotate:"
+                    text: "rotate:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id:slider_rotate
+                    id: slider_rotate
                    value: 22
                    from: 0
                    to:360
@ -105,23 +105,21 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text:"textColor:"
+                    text: "textColor:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluColorPicker{
-                    id:color_picker
-                    Component.onCompleted: {
-                        setColor(Qt.rgba(0,0,0,0.1))
-                    }
+                    id: color_picker
+                    current: Qt.rgba(0,0,0,0.1)
                }
            }
        }

        FluWatermark{
-            id:water_mark
+            id: water_mark
            anchors.fill: parent
            text:text_box.text
-            textColor: color_picker.colorValue
+            textColor: color_picker.current
            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
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import "../component"

-CustomWindow {
+FluWindow {

    id:window
    title:"关于"
    width: 600
-    height: 600
+    height: 580
    fixSize: true
    launchMode: FluWindowType.SingleTask

@ -19,9 +19,10 @@ CustomWindow {
            left: parent.left
            right: parent.right
        }
+        spacing: 5

        RowLayout{
-            Layout.topMargin: 20
+            Layout.topMargin: 10
            Layout.leftMargin: 15
            spacing: 14
            FluText{
@ -30,12 +31,12 @@ CustomWindow {
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
-                        FluApp.navigate("/")
+                        FluRouter.navigate("/")
                    }
                }
            }
            FluText{
-                text:"v%1".arg(appInfo.version)
+                text:"v%1".arg(AppInfo.version)
                font: FluTextStyle.Body
                Layout.alignment: Qt.AlignBottom
            }
@ -43,7 +44,6 @@ CustomWindow {

        RowLayout{
            spacing: 14
-            Layout.topMargin: 20
            Layout.leftMargin: 15
            FluText{
                text:"作者："
@ -54,6 +54,21 @@ CustomWindow {
            }
        }

+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"微信号："
+            }
+            FluText{
+                text:"FluentUI"
+                Layout.alignment: Qt.AlignBottom
+            }
+            FluText{
+                text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
+            }
+        }
+
        RowLayout{
            spacing: 14
            Layout.leftMargin: 15
--- a/example/qml/window/CrashWindow.qml
+++ b/example/qml/window/CrashWindow.qml
@ -0,0 +1,79 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import Qt.labs.platform 1.0
+import "../component"
+
+FluWindow {
+
+    id:window
+    title: qsTr("Friendly Reminder")
+    width: 300
+    height: 400
+    fixSize: true
+    showMinimize: false
+
+    property string crashFilePath
+
+    Component.onCompleted: {
+        window.stayTop = true
+    }
+
+    onInitArgument:
+        (argument)=>{
+            crashFilePath = argument.crashFilePath
+        }
+
+    Image{
+        width: 540/2
+        height: 285/2
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: 40
+        }
+        source: "qrc:/example/res/image/ic_crash.png"
+    }
+
+    FluText{
+        id:text_info
+        anchors{
+            top: parent.top
+            topMargin: 240
+            left: parent.left
+            right: parent.right
+            leftMargin: 10
+            rightMargin: 10
+        }
+        wrapMode: Text.WrapAnywhere
+        text: qsTr("We apologize for the inconvenience caused by an unexpected error")
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    RowLayout{
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+        FluButton{
+            text: qsTr("Report Logs")
+            onClicked: {
+                FluTools.showFileInFolder(crashFilePath)
+            }
+        }
+        Item{
+            width: 30
+            height: 1
+        }
+        FluFilledButton{
+            text: qsTr("Restart Program")
+            onClicked: {
+                FluRouter.exit(931)
+            }
+        }
+    }
+
+}
--- a/Show More
+++ b/Show More