Merge branch 'main' of https://github.com/zhuzichu520/FluentUI

feat: FluRectangle支持修改边框样式、FluTour增加指示器和动画效果

.vscode/settings.json

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

README.md

@@ -1,6 +1,5 @@
-# ATTENTION! THIS REPO HAS BEEN DEPRECATED!
+# ATTENTION! 
-# PLEASE USE THE BRAND NEW [FluentUI2](https://github.com/zhuzichu520/FluentUI2) INSTEAD!
+# PLEASE USE THE BRAND NEW [FluentUI Pro](https://github.com/zhuzichu520/FluentUI2) INSTEAD!
-# THIS REPO IS NO LONGER MAINTAINED.
 <div align=center>
 <img width=64 src="doc/preview/fluent_design.svg">
 

example/CMakeLists.txt

@@ -24,8 +24,8 @@ else ()
 endif ()
 
 #导入Qt相关依赖包
-find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network Widgets)
-find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network Widgets)
 
 #添加国际化脚本
 find_program(QT_LUPDATE NAMES lupdate lupdate-qt6)
@@ -141,6 +141,7 @@ target_link_libraries(${PROJECT_NAME} PRIVATE
         Qt${QT_VERSION_MAJOR}::Quick
         Qt${QT_VERSION_MAJOR}::Svg
         Qt${QT_VERSION_MAJOR}::Network
+	Qt${QT_VERSION_MAJOR}::Widgets
         fluentuiplugin
 )
 

example/example_en_US.ts

@@ -70,17 +70,17 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="50"/>
+        <location filename="qml/window/CrashWindow.qml" line="53"/>
         <source>We apologize for the inconvenience caused by an unexpected error</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="62"/>
+        <location filename="qml/window/CrashWindow.qml" line="65"/>
         <source>Report Logs</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="72"/>
+        <location filename="qml/window/CrashWindow.qml" line="75"/>
         <source>Restart Program</source>
         <translation type="unfinished"></translation>
     </message>
@@ -612,104 +612,104 @@
 <context>
     <name>MainWindow</name>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="86"/>
+        <location filename="qml/window/MainWindow.qml" line="88"/>
-        <location filename="qml/window/MainWindow.qml" line="94"/>
+        <location filename="qml/window/MainWindow.qml" line="96"/>
         <source>Quit</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="87"/>
+        <location filename="qml/window/MainWindow.qml" line="89"/>
         <source>Are you sure you want to exit the program?</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="88"/>
+        <location filename="qml/window/MainWindow.qml" line="90"/>
         <source>Minimize</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="91"/>
+        <location filename="qml/window/MainWindow.qml" line="93"/>
         <source>Friendly Reminder</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="91"/>
+        <location filename="qml/window/MainWindow.qml" line="93"/>
         <source>FluentUI is hidden from the tray, click on the tray to activate the window again</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="95"/>
+        <location filename="qml/window/MainWindow.qml" line="97"/>
-        <location filename="qml/window/MainWindow.qml" line="337"/>
+        <location filename="qml/window/MainWindow.qml" line="339"/>
         <source>Cancel</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="106"/>
+        <location filename="qml/window/MainWindow.qml" line="108"/>
         <source>Open in Separate Window</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="203"/>
+        <location filename="qml/window/MainWindow.qml" line="205"/>
         <source>Click Time</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="213"/>
+        <location filename="qml/window/MainWindow.qml" line="215"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="302"/>
+        <location filename="qml/window/MainWindow.qml" line="304"/>
         <source>Finish</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="303"/>
+        <location filename="qml/window/MainWindow.qml" line="305"/>
         <source>Next</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="304"/>
+        <location filename="qml/window/MainWindow.qml" line="306"/>
         <source>Previous</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="308"/>
+        <location filename="qml/window/MainWindow.qml" line="310"/>
         <source>Dark Mode</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="308"/>
+        <location filename="qml/window/MainWindow.qml" line="310"/>
         <source>Here you can switch to night mode.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="310"/>
+        <location filename="qml/window/MainWindow.qml" line="312"/>
         <source>Hide Easter eggs</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="310"/>
+        <location filename="qml/window/MainWindow.qml" line="312"/>
         <source>Try a few more clicks!!</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="334"/>
+        <location filename="qml/window/MainWindow.qml" line="336"/>
         <source>Upgrade Tips</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="335"/>
+        <location filename="qml/window/MainWindow.qml" line="337"/>
         <source>FluentUI is currently up to date </source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="335"/>
+        <location filename="qml/window/MainWindow.qml" line="337"/>
         <source> -- The current app version</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="335"/>
+        <location filename="qml/window/MainWindow.qml" line="337"/>
         <source> 
 Now go and download the new version？
 
@@ -718,17 +718,17 @@ Updated content:
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="338"/>
+        <location filename="qml/window/MainWindow.qml" line="340"/>
         <source>OK</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="365"/>
+        <location filename="qml/window/MainWindow.qml" line="367"/>
         <source>The current version is already the latest</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/MainWindow.qml" line="372"/>
+        <location filename="qml/window/MainWindow.qml" line="374"/>
         <source>The network is abnormal</source>
         <translation type="unfinished"></translation>
     </message>
@@ -831,9 +831,25 @@ Updated content:
     <name>T_Acrylic</name>
     <message>
         <location filename="qml/page/T_Acrylic.qml" line="10"/>
+        <location filename="qml/page/T_Acrylic.qml" line="72"/>
         <source>Acrylic</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Acrylic.qml" line="15"/>
+        <source>tintColor:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Acrylic.qml" line="25"/>
+        <source>tintOpacity:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Acrylic.qml" line="36"/>
+        <source>blurRadius:</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_Badge</name>
@@ -863,11 +879,22 @@ Updated content:
         <source>BreadcurmbBar</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_BreadcrumbBar.qml" line="15"/>
+        <source>Item_%1</source>
+        <oldsource>Item_&apos;%1&apos;</oldsource>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_BreadcrumbBar.qml" line="50"/>
         <source>Reset sample</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_BreadcrumbBar.qml" line="54"/>
+        <source>Item_</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_BubbleChart</name>
@@ -942,10 +969,16 @@ Updated content:
         <translation type="unfinished"></translation>
     </message>
     <message>
+        <location filename="qml/page/T_Buttons.qml" line="222"/>
         <location filename="qml/page/T_Buttons.qml" line="238"/>
         <source>Loading</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Buttons.qml" line="238"/>
+        <source>Normal</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_Buttons.qml" line="270"/>
         <source>Click IconButton</source>
@@ -1062,6 +1095,11 @@ Updated content:
         <source>Please enter a verification code</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Captcha.qml" line="48"/>
+        <source>verify</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_Captcha.qml" line="52"/>
         <source>The verification code is correct</source>
@@ -1085,6 +1123,11 @@ Updated content:
         <source>Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Carousel.qml" line="203"/>
+        <source>Auto play</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_CheckBox</name>
@@ -1158,6 +1201,62 @@ Updated content:
         <source>ComboBox</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="20"/>
+        <source>editable=false</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="26"/>
+        <location filename="qml/page/T_ComboBox.qml" line="50"/>
+        <location filename="qml/page/T_ComboBox.qml" line="74"/>
+        <location filename="qml/page/T_ComboBox.qml" line="100"/>
+        <source>Banana</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="27"/>
+        <location filename="qml/page/T_ComboBox.qml" line="51"/>
+        <location filename="qml/page/T_ComboBox.qml" line="75"/>
+        <location filename="qml/page/T_ComboBox.qml" line="101"/>
+        <source>Apple</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="28"/>
+        <location filename="qml/page/T_ComboBox.qml" line="52"/>
+        <location filename="qml/page/T_ComboBox.qml" line="76"/>
+        <location filename="qml/page/T_ComboBox.qml" line="102"/>
+        <source>Coconut</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="43"/>
+        <source>disabled=true</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="67"/>
+        <source>editable=true</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_ComboBox.qml" line="88"/>
+        <source>FluComboBox{
+    editable: true
+    model: ListModel {
+        id: model
+        ListElement { text: &quot;%1&quot; }
+        ListElement { text: &quot;%2&quot; }
+        ListElement { text: &quot;%3&quot; }
+    }
+    onAccepted: {
+        if (find(editText) === -1)
+            model.append({text: editText})
+    }
+}</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_CustomPlot</name>
@@ -1492,11 +1591,21 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
         <source>This is an InfoBar in the Warning Style</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_InfoBar.qml" line="39"/>
+        <source>Error</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_InfoBar.qml" line="41"/>
         <source>This is an InfoBar in the Error Style</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_InfoBar.qml" line="45"/>
+        <source>Success</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_InfoBar.qml" line="47"/>
         <source>This is an InfoBar in the Success Style</source>
@@ -1528,7 +1637,7 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
         <location filename="qml/page/T_InfoBar.qml" line="64"/>
         <location filename="qml/page/T_InfoBar.qml" line="75"/>
         <location filename="qml/page/T_InfoBar.qml" line="85"/>
-        <source>show &apos;%1</source>
+        <source>show &apos;%1&apos;</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
@@ -1538,11 +1647,34 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
         <source>This is an &apos;%1&apos;</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_InfoBar.qml" line="64"/>
+        <location filename="qml/page/T_InfoBar.qml" line="70"/>
+        <source>info1</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_InfoBar.qml" line="75"/>
+        <location filename="qml/page/T_InfoBar.qml" line="81"/>
+        <source>info2</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_InfoBar.qml" line="85"/>
+        <location filename="qml/page/T_InfoBar.qml" line="91"/>
+        <source>info3</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_InfoBar.qml" line="95"/>
         <source>clear all info</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_InfoBar.qml" line="103"/>
+        <source>Loading</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_LineChart</name>
@@ -1817,6 +1949,31 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
         <source>QRCode</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_QRCode.qml" line="27"/>
+        <source>text:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_QRCode.qml" line="41"/>
+        <source>color:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_QRCode.qml" line="54"/>
+        <source>bgColor:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_QRCode.qml" line="66"/>
+        <source>margins:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_QRCode.qml" line="80"/>
+        <source>size:</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_RadarChart</name>
@@ -2058,6 +2215,37 @@ Some contents...</source>
         <source>SplitLayout</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_SplitLayout.qml" line="18"/>
+        <source>orientation:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_SplitLayout.qml" line="23"/>
+        <location filename="qml/page/T_SplitLayout.qml" line="25"/>
+        <source>Horizontal</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_SplitLayout.qml" line="32"/>
+        <source>Vertical</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_SplitLayout.qml" line="57"/>
+        <source>Page 1</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_SplitLayout.qml" line="69"/>
+        <source>Page 2</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_SplitLayout.qml" line="78"/>
+        <source>Page 3</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_StaggeredLayout</name>
@@ -2074,6 +2262,27 @@ Some contents...</source>
         <source>StatusLayout</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_StatusLayout.qml" line="22"/>
+        <location filename="qml/page/T_StatusLayout.qml" line="24"/>
+        <source>Loading</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_StatusLayout.qml" line="31"/>
+        <source>Empty</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_StatusLayout.qml" line="38"/>
+        <source>Error</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_StatusLayout.qml" line="45"/>
+        <source>Success</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_TabView</name>
@@ -2087,6 +2296,48 @@ Some contents...</source>
         <source>Document </source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="39"/>
+        <source>Tab Width Behavior:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="44"/>
+        <location filename="qml/page/T_TabView.qml" line="46"/>
+        <source>Equal</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="53"/>
+        <source>SizeToContent</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="60"/>
+        <source>Compact</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="68"/>
+        <source>Tab Close Button Visibility:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="72"/>
+        <location filename="qml/page/T_TabView.qml" line="82"/>
+        <source>Always</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="75"/>
+        <source>Never</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TabView.qml" line="89"/>
+        <source>OnHover</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_TableView</name>
@@ -2117,7 +2368,7 @@ Some contents...</source>
     </message>
     <message>
         <location filename="qml/page/T_TableView.qml" line="176"/>
-        <location filename="qml/page/T_TableView.qml" line="503"/>
+        <location filename="qml/page/T_TableView.qml" line="504"/>
         <source>Name</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2167,37 +2418,37 @@ Some contents...</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="508"/>
+        <location filename="qml/page/T_TableView.qml" line="509"/>
         <source>Avatar</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="522"/>
+        <location filename="qml/page/T_TableView.qml" line="523"/>
         <source>Address</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="530"/>
+        <location filename="qml/page/T_TableView.qml" line="531"/>
         <source>Nickname</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="537"/>
+        <location filename="qml/page/T_TableView.qml" line="538"/>
         <source>Long String</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="545"/>
+        <location filename="qml/page/T_TableView.qml" line="546"/>
         <source>Options</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="563"/>
+        <location filename="qml/page/T_TableView.qml" line="564"/>
         <source>&lt;Previous</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TableView.qml" line="564"/>
+        <location filename="qml/page/T_TableView.qml" line="565"/>
         <source>Next&gt;</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2236,8 +2487,8 @@ Some contents...</source>
         <location filename="qml/page/T_TextBox.qml" line="33"/>
         <location filename="qml/page/T_TextBox.qml" line="64"/>
         <location filename="qml/page/T_TextBox.qml" line="97"/>
-        <location filename="qml/page/T_TextBox.qml" line="128"/>
+        <location filename="qml/page/T_TextBox.qml" line="135"/>
-        <location filename="qml/page/T_TextBox.qml" line="157"/>
+        <location filename="qml/page/T_TextBox.qml" line="168"/>
         <source>Disabled</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2256,6 +2507,11 @@ Some contents...</source>
         <source>AutoSuggestBox</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_TextBox.qml" line="131"/>
+        <source>Show suggest when pressed</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_Theme</name>
@@ -2295,6 +2551,12 @@ Some contents...</source>
         <oldsource>Rounded Window</oldsource>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Theme.qml" line="157"/>
+        <location filename="qml/page/T_Theme.qml" line="162"/>
+        <source>dwm-blur</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <location filename="qml/page/T_Theme.qml" line="158"/>
         <source>window tintOpacity</source>
@@ -2310,11 +2572,6 @@ Some contents...</source>
         <source>window effect</source>
         <translation type="unfinished"></translation>
     </message>
-    <message>
-        <location filename="qml/page/T_Theme.qml" line="178"/>
-        <source></source>
-        <translation></translation>
-    </message>
 </context>
 <context>
     <name>T_TimePicker</name>
@@ -2387,6 +2644,27 @@ Some contents...</source>
         <source>clear</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Timeline.qml" line="130"/>
+        <source>mode:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Timeline.qml" line="137"/>
+        <source>Left</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Timeline.qml" line="144"/>
+        <source>Right</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Timeline.qml" line="135"/>
+        <location filename="qml/page/T_Timeline.qml" line="151"/>
+        <source>Alternate</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_ToggleSwitch</name>
@@ -2454,49 +2732,60 @@ Some contents...</source>
     <name>T_Tour</name>
     <message>
         <location filename="qml/page/T_Tour.qml" line="15"/>
+        <location filename="qml/page/T_Tour.qml" line="23"/>
         <source>Upload File</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="15"/>
+        <location filename="qml/page/T_Tour.qml" line="23"/>
         <source>Put your files here.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="16"/>
-        <location filename="qml/page/T_Tour.qml" line="52"/>
+        <location filename="qml/page/T_Tour.qml" line="24"/>
-        <location filename="qml/page/T_Tour.qml" line="54"/>
+        <location filename="qml/page/T_Tour.qml" line="74"/>
+        <location filename="qml/page/T_Tour.qml" line="76"/>
         <source>Save</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="16"/>
+        <location filename="qml/page/T_Tour.qml" line="24"/>
         <source>Save your changes.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="17"/>
+        <location filename="qml/page/T_Tour.qml" line="25"/>
         <source>Other Actions</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="17"/>
+        <location filename="qml/page/T_Tour.qml" line="25"/>
         <source>Click to see other actions.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="31"/>
+        <location filename="qml/page/T_Tour.qml" line="46"/>
         <source>Begin Tour</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="45"/>
+        <location filename="qml/page/T_Tour.qml" line="52"/>
-        <location filename="qml/page/T_Tour.qml" line="47"/>
+        <source>Begin Tour with custom indicator</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Tour.qml" line="67"/>
+        <location filename="qml/page/T_Tour.qml" line="69"/>
         <source>Upload</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="61"/>
+        <location filename="qml/page/T_Tour.qml" line="83"/>
         <source>More</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2514,22 +2803,57 @@ Some contents...</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TreeView.qml" line="183"/>
+        <location filename="qml/page/T_TreeView.qml" line="92"/>
+        <source>cellHeight:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="105"/>
+        <source>depthPadding:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="121"/>
+        <source>showLine</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="126"/>
+        <source>checkable</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="134"/>
+        <source>all expand</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="140"/>
+        <source>all collapse</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="147"/>
+        <source>print selection model</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_TreeView.qml" line="182"/>
         <source>Title</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TreeView.qml" line="187"/>
+        <location filename="qml/page/T_TreeView.qml" line="186"/>
         <source>Name</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TreeView.qml" line="191"/>
+        <location filename="qml/page/T_TreeView.qml" line="190"/>
         <source>Avatar</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_TreeView.qml" line="195"/>
+        <location filename="qml/page/T_TreeView.qml" line="194"/>
         <source>Address</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2541,6 +2865,41 @@ Some contents...</source>
         <source>Typography</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="27"/>
+        <source>Display</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="33"/>
+        <source>Title Large</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="39"/>
+        <source>Title</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="45"/>
+        <source>Subtitle</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="51"/>
+        <source>Body Strong</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="57"/>
+        <source>Body</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Typography.qml" line="63"/>
+        <source>Caption</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_Watermark</name>
@@ -2549,5 +2908,45 @@ Some contents...</source>
         <source>Watermark</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="25"/>
+        <source>text:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="38"/>
+        <source>textSize:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="51"/>
+        <source>gapX:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="62"/>
+        <source>gapY:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="73"/>
+        <source>offsetX:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="84"/>
+        <source>offsetY:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="95"/>
+        <source>rotate:</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="qml/page/T_Watermark.qml" line="108"/>
+        <source>textColor:</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 </TS>

example/qml/page/T_Acrylic.qml

@@ -12,7 +12,7 @@ FluScrollablePage{
     RowLayout{
         spacing: 10
         FluText{
-            text:"tintColor:"
+            text: qsTr("tintColor:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluColorPicker{
@@ -22,7 +22,7 @@ FluScrollablePage{
     RowLayout{
         spacing: 10
         FluText{
-            text:"tintOpacity:"
+            text: qsTr("tintOpacity:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluSlider{
@@ -33,7 +33,7 @@ FluScrollablePage{
     RowLayout{
         spacing: 10
         FluText{
-            text:"blurRadius:"
+            text: qsTr("blurRadius:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluSlider{
@@ -69,7 +69,7 @@ FluScrollablePage{
                 y:(image.height-height)/2
                 FluText {
                     anchors.centerIn: parent
-                    text: "Acrylic"
+                    text: qsTr("Acrylic")
                     color: "#FFFFFF"
                     font: FluTextStyle.Subtitle
                 }

example/qml/page/T_Badge.qml

@@ -26,7 +26,8 @@ FluScrollablePage{
                 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{
+            Flow{
+                width: parent.width
                 spacing: 20
                 Rectangle{
                     width: 40
@@ -34,7 +35,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:0
                     }
@@ -46,7 +47,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:5
                     }
@@ -57,7 +58,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:50
                     }
@@ -68,9 +69,10 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
-                        count:100
+                        count:1000
+                        max: 999
                     }
                 }
                 Rectangle{
@@ -79,7 +81,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         isDot:true
                     }
@@ -90,7 +92,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:99
                         color: Qt.rgba(250/255,173/255,20/255,1)
@@ -102,12 +104,71 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:99
                         color: Qt.rgba(82/255,196/255,26/255,1)
                     }
                 }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "bottomLeft"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topLeft"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "bottomRight"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        count: "NEW"
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
             }
         }
     }
@@ -120,7 +181,9 @@ FluScrollablePage{
     radius: 8
     color: Qt.rgba(191/255,191/255,191/255,1)
     FluBadge{
+        position: "topRight"
         count: 100
+        max: 99
         isDot: false
         color: Qt.rgba(82/255,196/255,26/255,1)
     }

example/qml/page/T_BreadcrumbBar.qml

@@ -12,7 +12,7 @@ FluScrollablePage{
     Component.onCompleted: {
         var items = []
         for(var i=0;i<10;i++){
-            items.push({title:"Item_"+(i+1)})
+            items.push({title: qsTr("Item_%1").arg(i+1)})
         }
         breadcrumb_1.items = items
         breadcrumb_2.items = items
@@ -51,7 +51,7 @@ FluScrollablePage{
                 onClicked:{
                     var items = []
                     for(var i=0;i<10;i++){
-                        items.push({title:"Item_"+(i+1)})
+                        items.push({title: qsTr("Item_")+(i+1)})
                     }
                      breadcrumb_2.items = items
                 }

example/qml/page/T_Buttons.qml

@@ -219,7 +219,7 @@ FluScrollablePage{
         FluLoadingButton{
             id: btn_loading
             loading: loading_button_switch.checked
-            text: qsTr("Loading Button")
+            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Loading Button")
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -235,7 +235,7 @@ FluScrollablePage{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text: qsTr("Loading")
+            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Normal")
         }
     }
     CodeExpander{

example/qml/page/T_Captcha.qml

@@ -45,7 +45,7 @@ FluScrollablePage{
             Layout.preferredWidth: 240
         }
         FluButton{
-            text:"verify"
+            text: qsTr("verify")
             onClicked: {
                 var success =  captcha.verify(text_box.text)
                 if(success){

example/qml/page/T_Carousel.qml

@@ -121,7 +121,6 @@ FluScrollablePage{
 
         }
     }
-
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -6
@@ -140,6 +139,90 @@ FluScrollablePage{
     Component.onCompleted: {
         carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
     }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 300 + topPadding + bottomPadding
+        padding: 10
+        Layout.topMargin: 10
+        RowLayout{
+            anchors.fill: parent
+            Item{
+                Layout.preferredWidth: 400
+                Layout.fillHeight: true
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    orientation: Qt.Vertical
+                    autoPlay: auto_play_switch.checked
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignVCenter | Qt.AlignRight
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
+                            anchors.fill: parent
+                            Image {
+                                anchors.fill: parent
+                                source: model.url
+                                asynchronous: true
+                                fillMode:Image.PreserveAspectCrop
+                            }
+                            Rectangle{
+                                height: 40
+                                width: parent.width
+                                anchors.bottom: parent.bottom
+                                color: "#33000000"
+                                FluText{
+                                    anchors.fill: parent
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignHCenter
+                                    text:model.title
+                                    color: FluColors.Grey10
+                                }
+                            }
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        var arr = []
+                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
+                    }
+                }
+            }
+            FluToggleSwitch{
+                id: auto_play_switch
+                Layout.alignment: Qt.AlignRight
+                text: qsTr("Auto play")
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCarousel{
+    id:carousel
+    width: 400
+    height: 300
+    orientation: Qt.Vertical
+    delegate: Component{
+        Image {
+            anchors.fill: parent
+            source: model.url
+            asynchronous: true
+            fillMode:Image.PreserveAspectCrop
+        }
+    }
+    Component.onCompleted: {
+        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+    }
 }'
     }
 }

example/qml/page/T_ComboBox.qml

@@ -17,15 +17,15 @@ FluScrollablePage{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text: "editable=false"
+                text: qsTr("editable=false")
                 x:10
             }
             FluComboBox {
                 model: ListModel {
                     id: model_1
-                    ListElement { text: "Banana" }
+                    ListElement { text: qsTr("Banana") }
-                    ListElement { text: "Apple" }
+                    ListElement { text: qsTr("Apple") }
-                    ListElement { text: "Coconut" }
+                    ListElement { text: qsTr("Coconut") }
                 }
             }
         }
@@ -40,16 +40,16 @@ FluScrollablePage{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text: "disabled=true"
+                text: qsTr("disabled=true")
                 x:10
             }
             FluComboBox {
                 disabled: true
                 model: ListModel {
                     id: model_2
-                    ListElement { text: "Banana" }
+                    ListElement { text: qsTr("Banana") }
-                    ListElement { text: "Apple" }
+                    ListElement { text: qsTr("Apple") }
-                    ListElement { text: "Coconut" }
+                    ListElement { text: qsTr("Coconut") }
                 }
             }
         }
@@ -64,16 +64,16 @@ FluScrollablePage{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text: "editable=true"
+                text: qsTr("editable=true")
                 x:5
             }
             FluComboBox {
                 editable: true
                 model: ListModel {
                     id: model_3
-                    ListElement { text: "Banana" }
+                    ListElement { text: qsTr("Banana") }
-                    ListElement { text: "Apple" }
+                    ListElement { text: qsTr("Apple") }
-                    ListElement { text: "Coconut" }
+                    ListElement { text: qsTr("Coconut") }
                 }
                 onAccepted: {
                     if (find(editText) === -1)
@@ -85,19 +85,21 @@ FluScrollablePage{
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -6
-        code:'FluComboBox{
+        code:qsTr('FluComboBox{
     editable: true
     model: ListModel {
         id: model
-        ListElement { text: "Banana" }
+        ListElement { text: "%1" }
-        ListElement { text: "Apple" }
+        ListElement { text: "%2" }
-        ListElement { text: "Coconut" }
+        ListElement { text: "%3" }
     }
     onAccepted: {
         if (find(editText) === -1)
             model.append({text: editText})
     }
-}'
+}').arg(qsTr("Banana"))
+   .arg(qsTr("Apple"))
+   .arg(qsTr("Coconut"))
     }
 
 }

example/qml/page/T_InfoBar.qml

@@ -36,13 +36,13 @@ FluScrollablePage{
                 }
             }
             FluButton{
-                text:"Error"
+                text: qsTr("Error")
                 onClicked: {
                     showError(qsTr("This is an InfoBar in the Error Style"))
                 }
             }
             FluButton{
-                text:"Success"
+                text: qsTr("Success")
                 onClicked: {
                     showSuccess(qsTr("This is an InfoBar in the Success Style"))
                 }
@@ -61,34 +61,34 @@ FluScrollablePage{
             Row{
                 spacing: 5
                 FluButton{
-                    text: (info1 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info1")
+                    text: (info1 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info1"))
                     onClicked: {
                         if(info1) {
                             info1.close()
                             return
                         }
-                        info1 = showInfo(qsTr("This is an '%1'").arg("info1"), 0)
+                        info1 = showInfo(qsTr("This is an '%1'").arg(qsTr("info1")), 0)
                         info1.close()
                     }
                 }
                 FluButton{
-                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info2")
+                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info2"))
                     onClicked: {
                         if(info2) {
                             info2.close()
                             return
                         }
-                        info2 = showInfo(qsTr("This is an '%1'").arg("info2"), 0)
+                        info2 = showInfo(qsTr("This is an '%1'").arg(qsTr("info2")), 0)
                     }
                 }
                 FluButton{
-                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info3")
+                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info3"))
                     onClicked: {
                         if(info3) {
                             info3.close()
                             return
                         }
-                        info3 = showInfo(qsTr("This is an '%1'").arg("info3"), 0)
+                        info3 = showInfo(qsTr("This is an '%1'").arg(qsTr("info3")), 0)
                     }
                 }
                 FluButton{
@@ -100,7 +100,7 @@ FluScrollablePage{
             }
 
             FluButton{
-                text:"Loading"
+                text: qsTr("Loading")
                 onClicked: {
                     showLoading()
                 }

example/qml/page/T_Pivot.qml

@@ -49,26 +49,26 @@ FluScrollablePage{
         Layout.topMargin: -6
         code:'FluPivot{
     anchors.fill: parent
-    FluPivotItem:{
+    FluPivotItem {
-        text: qsTr("All")
+        title: qsTr("All")
         contentItem: FluText{
             text: qsTr("All emails go here.")
         }
     }
-    FluPivotItem:{
+    FluPivotItem {
-        text: qsTr("Unread")
+        title: qsTr("Unread")
         contentItem: FluText{
             text: qsTr("Unread emails go here.")
         }
     }
-    FluPivotItem:{
+    FluPivotItem {
-        text: qsTr("Flagged")
+        title: qsTr("Flagged")
         contentItem: FluText{
             text: qsTr("Flagged emails go here.")
         }
     }
-    FluPivotItem:{
+    FluPivotItem {
-        text: qsTr("Urgent")
+        title: qsTr("Urgent")
         contentItem: FluText{
             text: qsTr("Urgent emails go here.")
         }

example/qml/page/T_QRCode.qml

@@ -24,7 +24,7 @@ FluScrollablePage{
         spacing: 10
         Layout.topMargin: 20
         FluText{
-            text:"text:"
+            text: qsTr("text:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluTextBox{
@@ -38,7 +38,7 @@ FluScrollablePage{
         spacing: 10
         Layout.topMargin: 10
         FluText{
-            text:"color:"
+            text: qsTr("color:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluColorPicker{
@@ -51,7 +51,7 @@ FluScrollablePage{
         spacing: 10
         Layout.topMargin: 10
         FluText{
-            text:"bgColor:"
+            text: qsTr("bgColor:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluColorPicker{
@@ -63,7 +63,7 @@ FluScrollablePage{
     RowLayout{
         spacing: 10
         FluText{
-            text:"margins:"
+            text: qsTr("margins:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluSlider{
@@ -77,7 +77,7 @@ FluScrollablePage{
     RowLayout{
         spacing: 10
         FluText{
-            text:"size:"
+            text: qsTr("size:")
             Layout.alignment: Qt.AlignVCenter
         }
         FluSlider{

example/qml/page/T_Rectangle.qml

@@ -11,53 +11,71 @@ FluScrollablePage{
 
     FluFrame{
         Layout.fillWidth: true
-        Layout.preferredHeight: 80
         padding: 10
 
-        Column{
+        Flow{
+            width: parent.width
             spacing: 15
-            anchors{
+            FluRectangle{
-                left: parent.left
+                width: 50
-                verticalCenter: parent.verticalCenter
+                height: 50
+                color:"#0078d4"
+                radius:[0,0,0,0]
             }
-            RowLayout{
+            FluRectangle{
-                Layout.topMargin: 20
+                width: 50
-                FluRectangle{
+                height: 50
-                    width: 50
+                color:"#744da9"
-                    height: 50
+                radius:[15,15,15,15]
-                    color:"#0078d4"
+            }
-                    radius:[0,0,0,0]
+            FluRectangle{
-                }
+                width: 50
-                FluRectangle{
+                height: 50
-                    width: 50
+                color:"#ffeb3b"
-                    height: 50
+                radius:[15,0,0,0]
-                    color:"#744da9"
+            }
-                    radius:[15,15,15,15]
+            FluRectangle{
-                }
+                width: 50
-                FluRectangle{
+                height: 50
-                    width: 50
+                color:"#f7630c"
-                    height: 50
+                radius:[0,15,0,0]
-                    color:"#ffeb3b"
+            }
-                    radius:[15,0,0,0]
+            FluRectangle{
-                }
+                width: 50
-                FluRectangle{
+                height: 50
-                    width: 50
+                color:"#e71123"
-                    height: 50
+                radius:[0,0,15,0]
-                    color:"#f7630c"
+            }
-                    radius:[0,15,0,0]
+            FluRectangle{
-                }
+                width: 50
-                FluRectangle{
+                height: 50
-                    width: 50
+                color:"#b4009e"
-                    height: 50
+                radius:[0,0,0,15]
-                    color:"#e71123"
+            }
-                    radius:[0,0,15,0]
+            FluRectangle{
-                }
+                width: 50
-                FluRectangle{
+                height: 50
-                    width: 50
+                color:"#a8d5ba"
-                    height: 50
+                radius:[15,15,15,15]
-                    color:"#b4009e"
+                borderWidth: 3
-                    radius:[0,0,0,15]
+                borderColor: "#5b8a72"
-                }
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#dbe2ef"
+                radius:[15,0,0,0]
+                borderWidth: 2
+                borderColor: "#3f72af"
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#dbe2ef"
+                borderWidth: 2
+                borderColor: "#3f72af"
+                borderStyle: Qt.DashLine
+                dashPattern: [4,2]
             }
         }
     }
@@ -66,6 +84,10 @@ FluScrollablePage{
         Layout.topMargin: -6
         code:'FluRectangle{
     radius: [25,25,25,25]
+    borderWidth: 2
+    borderColor: "#000000"
+    borderStyle: Qt.DashLine
+    dashPattern: [4,2]
     width: 50
     height: 50
 }'

example/qml/page/T_SplitLayout.qml

@@ -15,21 +15,21 @@ FluContentPage{
             top: parent.top
         }
         FluText{
-            text:"orientation:"
+            text: qsTr("orientation:")
         }
         FluDropDownButton{
             id:btn_orientation
             Layout.preferredWidth: 120
-            text:"Horizontal"
+            text: qsTr("Horizontal")
             FluMenuItem{
-                text:"Horizontal"
+                text: qsTr("Horizontal")
                 onClicked: {
                     btn_orientation.text = text
                     split_layout.orientation = Qt.Horizontal
                 }
             }
             FluMenuItem{
-                text:"Vertical"
+                text: qsTr("Vertical")
                 onClicked: {
                     btn_orientation.text = text
                     split_layout.orientation = Qt.Vertical
@@ -54,7 +54,7 @@ FluContentPage{
             SplitView.maximumWidth: 400
             SplitView.maximumHeight: 400
             FluText {
-                text: "Page 1"
+                text: qsTr("Page 1")
                 anchors.centerIn: parent
             }
         }
@@ -66,7 +66,7 @@ FluContentPage{
             SplitView.fillWidth: true
             SplitView.fillHeight: true
             FluText {
-                text: "Page 2"
+                text: qsTr("Page 2")
                 anchors.centerIn: parent
             }
         }
@@ -75,7 +75,7 @@ FluContentPage{
             implicitWidth: 200
             implicitHeight: 200
             FluText {
-                text: "Page 3"
+                text: qsTr("Page 3")
                 anchors.centerIn: parent
             }
         }

example/qml/page/T_StatusLayout.qml

@@ -19,30 +19,30 @@ FluScrollablePage{
             FluDropDownButton{
                 id:btn_status_mode
                 Layout.preferredWidth: 140
-                text:"Loading"
+                text: qsTr("Loading")
                 FluMenuItem{
-                    text:"Loading"
+                    text: qsTr("Loading")
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusLayoutType.Loading
                     }
                 }
                 FluMenuItem{
-                    text:"Empty"
+                    text: qsTr("Empty")
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusLayoutType.Empty
                     }
                 }
                 FluMenuItem{
-                    text:"Error"
+                    text: qsTr("Error")
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusLayoutType.Error
                     }
                 }
                 FluMenuItem{
-                    text:"Success"
+                    text: qsTr("Success")
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusLayoutType.Success

example/qml/page/T_TabView.qml

@@ -35,52 +35,58 @@ FluScrollablePage{
         padding: 10
         RowLayout{
             spacing: 14
+            FluCopyableText{
+                text: qsTr("Tab Width Behavior:")
+            }
             FluDropDownButton{
                 id:btn_tab_width_behavior
                 Layout.preferredWidth: 140
-                text:"Equal"
+                text:  qsTr("Equal")
                 FluMenuItem{
-                    text:"Equal"
+                    text: qsTr("Equal")
                     onClicked: {
                         btn_tab_width_behavior.text = text
                         tab_view.tabWidthBehavior = FluTabViewType.Equal
                     }
                 }
                 FluMenuItem{
-                    text:"SizeToContent"
+                    text: qsTr("SizeToContent")
                     onClicked: {
                         btn_tab_width_behavior.text = text
                         tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
                     }
                 }
                 FluMenuItem{
-                    text:"Compact"
+                    text: qsTr("Compact")
                     onClicked: {
                         btn_tab_width_behavior.text = text
                         tab_view.tabWidthBehavior = FluTabViewType.Compact
                     }
                 }
             }
+            FluCopyableText{
+                text: qsTr("Tab Close Button Visibility:")
+            }
             FluDropDownButton{
                 id:btn_close_button_visibility
-                text:"Always"
+                text: qsTr("Always")
                 Layout.preferredWidth: 120
                 FluMenuItem{
-                    text:"Never"
+                    text: qsTr("Never")
                     onClicked: {
                         btn_close_button_visibility.text = text
                         tab_view.closeButtonVisibility = FluTabViewType.Never
                     }
                 }
                 FluMenuItem{
-                    text:"Always"
+                    text: qsTr("Always")
                     onClicked: {
                         btn_close_button_visibility.text = text
                         tab_view.closeButtonVisibility = FluTabViewType.Always
                     }
                 }
                 FluMenuItem{
-                    text:"OnHover"
+                    text: qsTr("OnHover")
                     onClicked: {
                         btn_close_button_visibility.text = text
                         tab_view.closeButtonVisibility = FluTabViewType.OnHover

example/qml/page/T_TableView.qml

@@ -493,6 +493,7 @@ FluContentPage{
         onRowsChanged: {
             root.checkBoxChanged()
         }
+        startRowIndex: (gagination.pageCurrent - 1) * gagination.__itemPerPage + 1
         columnSource:[
             {
                 title: table_view.customItem(com_column_checbox,{checked:true}),

example/qml/page/T_TextBox.qml

@@ -114,18 +114,26 @@ FluScrollablePage{
             placeholderText: qsTr("AutoSuggestBox")
             items: generateRandomNames(100)
             disabled: text_box_suggest_switch.checked
+            itemRows: 12
+            showSuggestWhenPressed: text_box_show_suggest_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-        FluToggleSwitch{
+        RowLayout{
-            id:text_box_suggest_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text: qsTr("Disabled")
+            FluToggleSwitch{
+                id:text_box_show_suggest_switch
+                text: qsTr("Show suggest when pressed")
+            }
+            FluToggleSwitch{
+                id:text_box_suggest_switch
+                text: qsTr("Disabled")
+            }
         }
     }
     CodeExpander{
@@ -133,6 +141,9 @@ FluScrollablePage{
         Layout.topMargin: -6
         code:'FluAutoSuggestBox{
     placeholderText: qsTr("AutoSuggestBox")
+    itemRows: 12
+    itemHeight: 38
+    showSuggestWhenPressed: false
 }'
     }
 

example/qml/page/T_Theme.qml

@@ -154,12 +154,12 @@ FluScrollablePage{
                 }
             }
             FluText{
-                visible: FluTheme.blurBehindWindowEnabled || window.effect === "dwm-blur"
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
                 text: qsTr("window tintOpacity")
                 Layout.topMargin: 20
             }
             FluSlider{
-                visible: FluTheme.blurBehindWindowEnabled || window.effect === "dwm-blur"
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
                 Layout.topMargin: 5
                 to:1
                 stepSize:0.1

example/qml/page/T_Timeline.qml

@@ -127,28 +127,28 @@ FluScrollablePage{
     RowLayout{
         Layout.topMargin: 10
         FluText{
-            text:"mode:"
+            text: qsTr("mode:")
         }
         FluDropDownButton{
             id: btn_mode
             Layout.preferredWidth: 100
-            text: "Alternate"
+            text:  qsTr("Alternate")
             FluMenuItem{
-                text: "Left"
+                text: qsTr("Left")
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Left
                 }
             }
             FluMenuItem{
-                text: "Right"
+                text: qsTr("Right")
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Right
                 }
             }
             FluMenuItem{
-                text: "Alternate"
+                text: qsTr("Alternate")
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Alternate

example/qml/page/T_Tour.qml

@@ -17,20 +17,42 @@ FluScrollablePage{
             {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
         ]
     }
+    FluTour{
+        id:tour_custom_indicator
+        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}
+        ]
+        indicator: Component{
+            FluText {
+                text: "%1 / %2".arg(current + 1).arg(total)
+            }
+        }
+    }
 
     FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 130
         padding: 10
 
-        FluFilledButton{
+        Row{
             anchors{
                 top: parent.top
                 topMargin: 14
             }
-            text: qsTr("Begin Tour")
+            spacing: 20
-            onClicked: {
+            FluFilledButton{
-                tour.open()
+                text: qsTr("Begin Tour")
+                onClicked: {
+                    tour.open()
+                }
+            }
+            FluFilledButton{
+                text: qsTr("Begin Tour with custom indicator")
+                onClicked: {
+                    tour_custom_indicator.open()
+                }
             }
         }
 

example/qml/page/T_TreeView.qml

@@ -9,7 +9,6 @@ FluContentPage {
 
     title: qsTr("TreeView")
 
-
     function treeData(){
         const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
         function getRandomName(){
@@ -90,7 +89,7 @@ FluContentPage {
                 RowLayout{
                     spacing: 10
                     FluText{
-                        text: "cellHeight:"
+                        text: qsTr("cellHeight:")
                         Layout.alignment: Qt.AlignVCenter
                     }
                     FluSlider{
@@ -103,7 +102,7 @@ FluContentPage {
                 RowLayout{
                     spacing: 10
                     FluText{
-                        text: "depthPadding:"
+                        text: qsTr("depthPadding:")
                         Layout.alignment: Qt.AlignVCenter
                     }
                     FluSlider{
@@ -119,12 +118,12 @@ FluContentPage {
                 anchors.verticalCenter: parent.verticalCenter
                 FluToggleSwitch{
                     id: switch_showline
-                    text:"showLine"
+                    text: qsTr("showLine")
                     checked: false
                 }
                 FluToggleSwitch{
                     id: switch_checkable
-                    text:"checkable"
+                    text: qsTr("checkable")
                     checked: false
                 }
             }
@@ -132,20 +131,20 @@ FluContentPage {
                 spacing: 8
                 anchors.verticalCenter: parent.verticalCenter
                 FluButton{
-                    text: "all expand"
+                    text: qsTr("all expand")
                     onClicked: {
                         tree_view.allExpand()
                     }
                 }
                 FluButton{
-                    text: "all collapse"
+                    text: qsTr("all collapse")
                     onClicked: {
                         tree_view.allCollapse()
                     }
                 }
             }
             FluButton{
-                text: "print selection model"
+                text: qsTr("print selection model")
                 onClicked: {
                     var printData = []
                     var data = tree_view.selectionModel();

example/qml/page/T_Typography.qml

@@ -24,43 +24,43 @@ FluContentPage {
             transformOrigin: Item.TopLeft
             FluText{
                 id:text_Display
-                text:"Display"
+                text: qsTr("Display")
                 padding: 0
                 font: FluTextStyle.Display
             }
             FluText{
                 id:text_TitleLarge
-                text:"Title Large"
+                text: qsTr("Title Large")
                 padding: 0
                 font: FluTextStyle.TitleLarge
             }
             FluText{
                 id:text_Title
-                text:"Title"
+                text: qsTr("Title")
                 padding: 0
                 font: FluTextStyle.Title
             }
             FluText{
                 id:text_Subtitle
-                text:"Subtitle"
+                text:  qsTr("Subtitle")
                 padding: 0
                 font: FluTextStyle.Subtitle
             }
             FluText{
                 id:text_BodyStrong
-                text:"Body Strong"
+                text: qsTr("Body Strong")
                 padding: 0
                 font: FluTextStyle.BodyStrong
             }
             FluText{
                 id:text_Body
-                text:"Body"
+                text: qsTr("Body")
                 padding: 0
                 font: FluTextStyle.Body
             }
             FluText{
                 id:text_Caption
-                text:"Caption"
+                text: qsTr("Caption")
                 padding: 0
                 font: FluTextStyle.Caption
             }

example/qml/page/T_Watermark.qml

@@ -22,7 +22,7 @@ FluContentPage{
                 spacing: 10
                 Layout.topMargin: 14
                 FluText{
-                    text: "text:"
+                    text: qsTr("text:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluTextBox{
@@ -35,7 +35,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "textSize:"
+                    text: qsTr("textSize:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -48,7 +48,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "gapX:"
+                    text: qsTr("gapX:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -59,7 +59,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "gapY:"
+                    text: qsTr("gapY:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -70,7 +70,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "offsetX:"
+                    text: qsTr("offsetX:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -81,7 +81,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "offsetY:"
+                    text: qsTr("offsetY:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -92,7 +92,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "rotate:"
+                    text: qsTr("rotate:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -105,7 +105,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text: "textColor:"
+                    text: qsTr("textColor:")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluColorPicker{

example/qml/window/CrashWindow.qml

@@ -19,6 +19,9 @@ FluWindow {
     Component.onCompleted: {
         window.stayTop = true
     }
+    Component.onDestruction: {
+        FluRouter.exit()
+    }
 
     onInitArgument:
         (argument)=>{

example/qml/window/MainWindow.qml

@@ -69,6 +69,8 @@ FluWindow {
                     window.show()
                     window.raise()
                     window.requestActivate()
+                }else if(reason === SystemTrayIcon.Context){
+                    system_tray.menu.open()
                 }
             }
     }

example/src/main.cpp

@@ -90,7 +90,7 @@ int main(int argc, char *argv[]) {
     engine.rootContext()->setContextProperty("TranslateHelper", TranslateHelper::getInstance());
     engine.rootContext()->setContextProperty("Network", Network::getInstance());
 #ifdef FLUENTUI_BUILD_STATIC_LIB
-    FluentUI::getInstance()->registerTypes(&engine);
+    FluentUI::registerTypes(&engine);
 #endif
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
     QObject::connect(

src/CMakeLists.txt

@@ -145,7 +145,7 @@ endif ()
 if (QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #如果是Qt6.2版本以上，则使用qt_add_library，qt_add_qml_module函数添加资源文件
     if (FLUENTUI_BUILD_STATIC_LIB)
-        set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/FluentUI)
+        set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/FluentUI)
     endif ()
     qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
     qt_add_qml_module(${PROJECT_NAME}

src/FluFrameless.cpp

@@ -441,6 +441,9 @@ void FluFrameless::componentComplete() {
     window()->setFlag(Qt::CustomizeWindowHint, true);
     window()->setFlag(Qt::FramelessWindowHint, true);
     window()->setProperty("__borderWidth", 1);
+#endif
+#ifdef Q_OS_WIN
+    window()->setFlag(Qt::CustomizeWindowHint, true);
 #endif
     window()->installEventFilter(this);
     QGuiApplication::instance()->installNativeEventFilter(this);

src/FluRectangle.cpp

@@ -2,33 +2,69 @@
 #include <QPainterPath>
 
 FluRectangle::FluRectangle(QQuickItem *parent) : QQuickPaintedItem(parent) {
-    color(QColor(255, 255, 255, 255));
+    color(Qt::white);
     radius({0, 0, 0, 0});
+    borderWidth(0);
+    borderColor(Qt::black);
+    borderStyle(Qt::SolidLine);
+    dashPattern({});
     connect(this, &FluRectangle::colorChanged, this, [=] { update(); });
     connect(this, &FluRectangle::radiusChanged, this, [=] { update(); });
+    connect(this, &FluRectangle::borderWidthChanged, this, [=] { update(); });
+    connect(this, &FluRectangle::borderColorChanged, this, [=] { update(); });
+    connect(this, &FluRectangle::borderStyleChanged, this, [=] { update(); });
+    connect(this, &FluRectangle::dashPatternChanged, this, [=] { update(); });
 }
 
+bool FluRectangle::borderValid() const {
+    return qRound(_borderWidth) >= 1 && _color.isValid() && _color.alpha() > 0;
+}
 
 void FluRectangle::paint(QPainter *painter) {
     painter->save();
     painter->setRenderHint(QPainter::Antialiasing);
-    QPainterPath path;
+
     QRectF rect = boundingRect();
-    path.moveTo(rect.bottomRight() - QPointF(0, _radius[2]));
+    bool drawBorder = borderValid();
-    path.lineTo(rect.topRight() + QPointF(0, _radius[1]));
+    if (drawBorder) {
-    path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(_radius[1] * 2, 0)),
+        // 绘制边框时画笔的宽度从路径向两侧扩充
-                      QSize(_radius[1] * 2, _radius[1] * 2)),
+        // 因此实际绘制的矩形应向内侧收缩边框宽度的一半，避免边框裁剪导致不完整
-               0, 90);
+        qreal halfBorderWidth = _borderWidth / 2.0;
-    path.lineTo(rect.topLeft() + QPointF(_radius[0], 0));
+        rect.adjust(halfBorderWidth, halfBorderWidth, -halfBorderWidth, -halfBorderWidth);
-    path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(_radius[0] * 2, _radius[0] * 2)), 90, 90);
+    }
-    path.lineTo(rect.bottomLeft() - QPointF(0, _radius[3]));
+
-    path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, _radius[3] * 2)),
+    QPainterPath path;
-                      QSize(_radius[3] * 2, _radius[3] * 2)),
+    QList<int> r = _radius;
-               180, 90);
+
-    path.lineTo(rect.bottomRight() - QPointF(_radius[2], 0));
+    while (r.size() < 4) {
-    path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(_radius[2] * 2, _radius[2] * 2)),
+        r.append(0);
-                      QSize(_radius[2] * 2, _radius[2] * 2)),
+    }
-               270, 90);
+
+    // 从右下角开始逆时针绘制圆角矩形路径
+    path.moveTo(rect.bottomRight() - QPointF(0, r[2]));
+    path.lineTo(rect.topRight() + QPointF(0, r[1]));
+    path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(r[1] * 2, 0)), QSize(r[1] * 2, r[1] * 2)), 0, 90);
+
+    path.lineTo(rect.topLeft() + QPointF(r[0], 0));
+    path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(r[0] * 2, r[0] * 2)), 90, 90);
+
+    path.lineTo(rect.bottomLeft() - QPointF(0, r[3]));
+    path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, r[3] * 2)), QSize(r[3] * 2, r[3] * 2)), 180, 90);
+
+    path.lineTo(rect.bottomRight() - QPointF(r[2], 0));
+    path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(r[2] * 2, r[2] * 2)), QSize(r[2] * 2, r[2] * 2)), 270, 90);
+
+    // 填充背景
     painter->fillPath(path, _color);
+
+    // 绘制边框
+    if (drawBorder) {
+        QPen pen(_borderColor, _borderWidth, _borderStyle);
+        if (_borderStyle == Qt::DashLine || _borderStyle == Qt::CustomDashLine) {
+            pen.setDashPattern(_dashPattern);
+        }
+        painter->strokePath(path, pen);
+    }
+
     painter->restore();
 }

src/FluRectangle.h

@@ -12,9 +12,15 @@ class FluRectangle : public QQuickPaintedItem {
     Q_OBJECT
     Q_PROPERTY_AUTO(QColor, color)
     Q_PROPERTY_AUTO(QList<int>, radius)
+    Q_PROPERTY_AUTO(qreal, borderWidth)
+    Q_PROPERTY_AUTO(QColor, borderColor)
+    Q_PROPERTY_AUTO(Qt::PenStyle, borderStyle)
+    Q_PROPERTY_AUTO(QVector<qreal>, dashPattern)
     QML_NAMED_ELEMENT(FluRectangle)
 public:
     explicit FluRectangle(QQuickItem *parent = nullptr);
 
+    bool borderValid() const;
+
     void paint(QPainter *painter) override;
 };

src/FluTreeModel.cpp

@@ -107,7 +107,7 @@ void FluTreeModel::checkRow(int row, bool checked) {
 void FluTreeModel::setDataSource(QList<QMap<QString, QVariant>> data) {
     _dataSource.clear();
     if (_root) {
-        delete _root;
+        _root->deleteLater();
         _root = nullptr;
     }
     _root = new FluTreeNode(this);
@@ -115,7 +115,7 @@ void FluTreeModel::setDataSource(QList<QMap<QString, QVariant>> data) {
     while (data.count() > 0) {
         auto item = data.at(data.count() - 1);
         data.pop_back();
-        auto *node = new FluTreeNode(this);
+        auto *node = new FluTreeNode(_root);
         node->_depth = item.value("__depth").toInt();
         node->_parent = item.value("__parent").value<FluTreeNode *>();
         node->_data = item;

src/FluentUI.cpp

@@ -23,12 +23,14 @@
 #include "qmlcustomplot/ticker.h"
 #include "qmlcustomplot/grid.h"
 
+const char* FluentUI::_uri = "FluentUI";
+
 void FluentUI::registerTypes(QQmlEngine *engine) {
     initializeEngine(engine, _uri);
     registerTypes(_uri);
 }
 
-void FluentUI::registerTypes(const char *uri) const {
+void FluentUI::registerTypes(const char *uri) {
 #if (QT_VERSION < QT_VERSION_CHECK(6, 2, 0))
     Q_INIT_RESOURCE(fluentui);
     int major = _major;

src/FluentUI.h

@@ -2,25 +2,22 @@
 
 #include <QObject>
 #include <QQmlEngine>
-#include "singleton.h"
 
 /**
  * @brief The FluentUI class
  */
-class FluentUI : public QObject {
+class FluentUI{
-    Q_OBJECT
 
 public:
-    SINGLETON(FluentUI)
 
-    Q_DECL_EXPORT void registerTypes(QQmlEngine *engine);
+   static Q_DECL_EXPORT void registerTypes(QQmlEngine *engine);
 
-    void registerTypes(const char *uri) const;
+   static void registerTypes(const char *uri);
 
-    void initializeEngine(QQmlEngine *engine, [[maybe_unused]] const char *uri);
+   static void initializeEngine(QQmlEngine *engine, [[maybe_unused]] const char *uri);
 
 private:
-    const int _major = 1;
+   static const int _major = 1;
-    const int _minor = 0;
+   static const int _minor = 0;
-    const char *_uri = "FluentUI";
+   static const char *_uri;
 };

src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -7,9 +7,12 @@ FluTextBox{
     property var items:[]
     property string emptyText: qsTr("No results found")
     property int autoSuggestBoxReplacement: FluentIcons.Search
+    property int itemHeight: 38
+    property int itemRows: 8
+    property bool showSuggestWhenPressed: false
     property string textRole: "title"
     property var filter: function(item){
-        if(item.title.indexOf(control.text)!==-1){
+        if(item[textRole].indexOf(control.text)!==-1){
             return true
         }
         return false
@@ -29,17 +32,11 @@ FluTextBox{
             control.updateText(modelData[textRole])
         }
         function loadData(){
-            var result = []
             if(items==null){
-                list_view.model = result
+                list_view.model = []
                 return
             }
-            items.map(function(item){
+            list_view.model = items.filter(item => control.filter(item))
-                if(control.filter(item)){
-                    result.push(item)
-                }
-            })
-            list_view.model = result
         }
     }
     onActiveFocusChanged: {
@@ -69,7 +66,7 @@ FluTextBox{
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
-                    height: visible ? 38 : 0
+                    height: visible ? control.itemHeight : 0
                     visible: list_view.count === 0
                     FluText{
                         text: emptyText
@@ -82,7 +79,7 @@ FluTextBox{
                 }
                 delegate:FluControl{
                     id: item_control
-                    height: 38
+                    height: control.itemHeight
                     width: control.width
                     onClicked: {
                         d.handleClick(modelData)
@@ -114,7 +111,7 @@ FluTextBox{
         background:Rectangle{
             id: rect_background
             implicitWidth: control.width
-            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
+            implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
             radius: 5
             color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
             border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@@ -124,6 +121,14 @@ FluTextBox{
         }
     }
     onTextChanged: {
+        control.showSuggest()
+    }
+    onPressed: {
+        if(control.showSuggestWhenPressed){
+            control.showSuggest()
+        }
+    }
+    function showSuggest(){
         d.loadData()
         if(d.flagVisible){
             var pos = control.mapToItem(null, 0, 0)

src/Qt5/imports/FluentUI/Controls/FluBadge.qml

@@ -5,19 +5,15 @@ import FluentUI 1.0
 Rectangle{
     property bool isDot: false
     property bool showZero: false
-    property int count: 0
+    property var count: 0
-    property bool topRight: false
+    property int max: 99
+    property string position: "" // topLeft, topRight, bottomLeft, bottomRight
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
         if(isDot)
             return 10
-        if(count<10){
+        return content_text.implicitWidth + 12
-            return 20
-        }else if(count<100){
-            return 30
-        }
-        return 40
     }
     height: {
         if(isDot)
@@ -31,49 +27,74 @@ Rectangle{
     }
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
-    anchors{
+    anchors {
+        left: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
+        }
         right: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.right
+                return undefined
-            return undefined
+            }
+            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
         }
         top: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.top
+                return undefined
-            return undefined
+            }
+            return (position === "topLeft" || position === "topRight") ? parent.top : undefined
+        }
+        bottom: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
+        }
+        leftMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         rightMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return -(control.width/2)
             }
-            return 0
+            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         topMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return  -10
             }
-            return 0
+            return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
+        }
+        bottomMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
         }
     }
     visible: {
-        if(showZero)
+        if(typeof(count) === "number"){
-            return true
+            return showZero ? true : count !== 0
-        return count!==0
+        }
+        return true
     }
     FluText{
+        id: content_text
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
         visible: !isDot
         text:{
-            if(count<100)
+            if(typeof(count) === "string"){
                 return count
-            return "100+"
+            }else if(typeof(count) === "number"){
+                return count <= max ? count.toString() : "%1+".arg(max.toString())
+            }
+            return ""
         }
     }
 }

src/Qt5/imports/FluentUI/Controls/FluCarousel.qml

@@ -4,6 +4,7 @@ import FluentUI 1.0
 
 Item {
     property bool autoPlay: true
+    property int orientation: Qt.Horizontal
     property int loopTime: 2000
     property var model
     property Component delegate
@@ -14,7 +15,7 @@ Item {
     property int indicatorMarginTop: 0
     property int indicatorMarginBottom: 20
     property int indicatorSpacing: 10
-    property alias indicatorAnchors: layout_indicator.anchors
+    property alias indicatorAnchors: indicator_loader.anchors
     property Component indicatorDelegate : com_indicator
     id:control
     width: 400
@@ -24,13 +25,24 @@ Item {
     }
     QtObject{
         id:d
-        property bool flagXChanged: true
+        property bool isManualMoving: false
         property bool isAnimEnable: control.autoPlay && list_view.count>3
+        onIsAnimEnableChanged: {
+            if(isAnimEnable){
+                timer_run.restart()
+            }else{
+                timer_run.stop()
+            }
+        }
         function setData(data){
-            if(!data){
+            if(!data || !Array.isArray(data)){
                 return
             }
             content_model.clear()
+            list_view.resetPos()
+            if(data.length === 0){
+                return
+            }
             content_model.append(data[data.length-1])
             content_model.append(data)
             content_model.append(data[0])
@@ -49,7 +61,7 @@ Item {
         clip: true
         boundsBehavior: ListView.StopAtBounds
         model:content_model
-        maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
+        maximumFlickVelocity: 4 * (control.orientation === Qt.Vertical ? height : width)
         preferredHighlightBegin: 0
         preferredHighlightEnd: 0
         highlightMoveDuration: 0
@@ -63,7 +75,7 @@ Item {
                 d.setData(control.model)
             }
         }
-        orientation : ListView.Horizontal
+        orientation : control.orientation
         delegate: Item{
             id:item_control
             width: ListView.view.width
@@ -88,31 +100,63 @@ Item {
             }
         }
         onMovementEnded:{
-            currentIndex = list_view.contentX/list_view.width
+            d.isManualMoving = false
-            if(currentIndex === 0){
+            list_view.highlightMoveDuration = 0
-                currentIndex = list_view.count-2
+            if(control.orientation === Qt.Vertical){
-            }else if(currentIndex === list_view.count-1){
+                currentIndex = (list_view.contentY - list_view.originY) / list_view.height
-                currentIndex = 1
+                if(currentIndex === 0){
+                    currentIndex = list_view.count - 2
+                }else if(currentIndex === list_view.count - 1) {
+                    currentIndex = 1
+                }
+            } else {
+                currentIndex = (list_view.contentX - list_view.originX) / list_view.width
+                if(currentIndex === 0){
+                    currentIndex = list_view.count - 2
+                }else if(currentIndex === list_view.count - 1){
+                    currentIndex = 1
+                }
+            }
+            if(d.isAnimEnable){
+                timer_run.restart()
             }
-            d.flagXChanged = false
-            timer_run.restart()
         }
         onMovementStarted: {
-            d.flagXChanged = true
+            d.isManualMoving = true
             timer_run.stop()
         }
         onContentXChanged: {
-            if(d.flagXChanged){
+            if(d.isManualMoving && control.orientation === Qt.Horizontal){
-                var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
+                const range = getPosRange(list_view.width, currentIndex)
-                var minY = Math.max(0,(list_view.width*(currentIndex-1)))
+                if(contentX >= range.max){
-                if(contentX>=maxX){
+                    contentX = range.max
-                    contentX = maxX
                 }
-                if(contentX<=minY){
+                if(contentX <= range.min){
-                    contentX = minY
+                    contentX = range.min
                 }
             }
         }
+        onContentYChanged: {
+            if(d.isManualMoving && control.orientation === Qt.Vertical){
+                const range = getPosRange(list_view.height, currentIndex)
+                if(contentY >= range.max){
+                    contentY = range.max
+                }
+                if(contentY <= range.min){
+                    contentY = range.min
+                }
+            }
+        }
+        function resetPos() {
+            contentX = 0
+            contentY = 0
+        }
+        function getPosRange(size, index) {
+            return {
+                "min": Math.max(0, size * (index - 1)),
+                "max": Math.min(size * (index + 1), list_view.count * size)
+            }
+        }
     }
     Component{
         id:com_indicator
@@ -137,9 +181,9 @@ Item {
             }
         }
     }
-    Row{
+
-        id:layout_indicator
+    Loader{
-        spacing: control.indicatorSpacing
+        id: indicator_loader
         anchors{
             horizontalCenter:(indicatorGravity & Qt.AlignHCenter) ? parent.horizontalCenter : undefined
             verticalCenter: (indicatorGravity & Qt.AlignVCenter) ? parent.verticalCenter : undefined
@@ -152,28 +196,66 @@ Item {
             rightMargin: control.indicatorMarginBottom
             topMargin: control.indicatorMarginBottom
         }
-        visible: showIndicator
+        active: showIndicator
-        Repeater{
+        sourceComponent: control.orientation === Qt.Vertical ? column_indicator : row_indicator
-            id:repeater_indicator
+    }
-            model: list_view.count
+
-            FluLoader{
+    Component{
-                property int displayIndex: {
+        id: row_indicator
-                    if(index === 0)
+        Row{
-                        return list_view.count-3
+            id:layout_indicator
-                    if(index === list_view.count-1)
+            spacing: control.indicatorSpacing
-                        return 0
+            Repeater{
-                    return index-1
+                id:repeater_indicator
-                }
+                model: list_view.count
-                property int realIndex: index
+                FluLoader{
-                property bool checked: list_view.currentIndex === index
+                    property int displayIndex: {
-                sourceComponent: {
+                        if(index === 0)
-                    if(index===0 || index===list_view.count-1)
+                            return list_view.count-3
-                        return undefined
+                        if(index === list_view.count-1)
-                    return control.indicatorDelegate
+                            return 0
+                        return index-1
+                    }
+                    property int realIndex: index
+                    property bool checked: list_view.currentIndex === index
+                    sourceComponent: {
+                        if(index===0 || index===list_view.count-1)
+                            return undefined
+                        return control.indicatorDelegate
+                    }
                 }
             }
         }
     }
+
+    Component{
+        id: column_indicator
+        Column{
+            id:layout_indicator
+            spacing: control.indicatorSpacing
+            Repeater{
+                id:repeater_indicator
+                model: list_view.count
+                FluLoader{
+                    property int displayIndex: {
+                        if(index === 0)
+                            return list_view.count-3
+                        if(index === list_view.count-1)
+                            return 0
+                        return index-1
+                    }
+                    property int realIndex: index
+                    property bool checked: list_view.currentIndex === index
+                    sourceComponent: {
+                        if(index===0 || index===list_view.count-1)
+                            return undefined
+                        return control.indicatorDelegate
+                    }
+                }
+            }
+        }
+    }
+
     Timer{
         id:timer_anim
         interval: 250
@@ -195,10 +277,10 @@ Item {
         }
     }
     function changedIndex(index){
-        d.flagXChanged = true
+        d.isManualMoving = true
         timer_run.stop()
         list_view.currentIndex = index
-        d.flagXChanged = false
+        d.isManualMoving = false
         if(d.isAnimEnable){
             timer_run.restart()
         }

src/Qt5/imports/FluentUI/Controls/FluComboBox.qml

@@ -55,7 +55,7 @@ T.ComboBox {
         font:control.font
         readOnly: control.down
         color: {
-            if(control.disabled) {
+            if(!control.enabled) {
                 return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
             }
             return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -97,7 +97,7 @@ T.ComboBox {
             anchors.margins: -2
         }
         color:{
-            if(disabled){
+            if(!enabled){
                 return disableColor
             }
             return hovered ? hoverColor :normalColor

src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml

@@ -178,7 +178,12 @@ FluButton {
                                     }
                                     if(type === 1){
                                         text_month.text = model
+                                        let day = list_view_3.model[list_view_3.currentIndex]
                                         list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
+                                        if(list_view_3.model.indexOf(day) === -1){
+                                            day = list_view_3.model[list_view_3.model.length - 1]
+                                        }
+                                        list_view_3.currentIndex = list_view_3.model.indexOf(day)
                                         text_day.text = list_view_3.model[list_view_3.currentIndex]
 
                                     }

src/Qt5/imports/FluentUI/Controls/FluMenuBarItem.qml

@@ -6,7 +6,7 @@ T.MenuBarItem {
     property bool disabled: false
     property color textColor: {
         if(FluTheme.dark){
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(131/255,131/255,131/255,1)
             }
             if(pressed){
@@ -14,7 +14,7 @@ T.MenuBarItem {
             }
             return Qt.rgba(1,1,1,1)
         }else{
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(160/255,160/255,160/255,1)
             }
             if(pressed){

src/Qt5/imports/FluentUI/Controls/FluProgressBar.qml

@@ -14,13 +14,6 @@ ProgressBar{
         id:d
         property real _radius: strokeWidth/2
     }
-    onIndeterminateChanged:{
-        if(!indeterminate){
-            animator_x.duration = 0
-            rect_progress.x = 0
-            animator_x.duration = control.duration
-        }
-    }
     background: Rectangle {
         implicitWidth: 150
         implicitHeight: control.strokeWidth
@@ -45,6 +38,11 @@ ProgressBar{
                 id: animator_x
                 running: control.indeterminate && control.visible
                 loops: Animation.Infinite
+                onRunningChanged: {
+                    if(!running){
+                        rect_progress.x = 0
+                    }
+                }
                 PropertyAnimation {
                     from: -rect_progress.width
                     to: control.width + rect_progress.width

src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml

@@ -139,13 +139,13 @@ T.SpinBox {
         radius: 4
         border.width: 1
         border.color: {
-            if(contentItem.disabled){
+            if(!contentItem.enabled){
                 return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
             }
             return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
         }
         color: {
-            if(contentItem.disabled){
+            if(!contentItem.enabled){
                 return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
             }
             if(contentItem.activeFocus){

src/Qt5/imports/FluentUI/Controls/FluTableView.qml

@@ -17,6 +17,7 @@ Rectangle {
     property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1)
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
+    property int startRowIndex: 1
     property color selectedBorderColor: FluTheme.primaryColor
     property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
     property alias view: table_view
@@ -266,30 +267,18 @@ Rectangle {
                 d.rowHoverIndex = row
             }
             onWidthChanged: {
-                if(editVisible){
+                updatePosition()
-                    updateEditPosition()
-                }
-                if(isMainTable){
-                    updateTableItem()
-                }
             }
             onHeightChanged: {
-                if(editVisible){
+                updatePosition()
-                    updateEditPosition()
-                }
-                if(isMainTable){
-                    updateTableItem()
-                }
             }
             onXChanged: {
-                if(editVisible){
+                updatePosition()
-                    updateEditPosition()
-                }
-                if(isMainTable){
-                    updateTableItem()
-                }
             }
             onYChanged: {
+                updatePosition()
+            }
+            function updatePosition(){
                 if(editVisible){
                     updateEditPosition()
                 }
@@ -310,9 +299,11 @@ Rectangle {
             }
             function updateTableItem(){
                 var columnModel = control.columnSource[column]
-                columnModel.x = item_table_mouse.x
+                if(columnModel.x !== item_table_mouse.x || columnModel.y !== item_table_mouse.y){
-                columnModel.y = item_table_mouse.y
+                    columnModel.x = item_table_mouse.x
-                d.tableItemLayout(column)
+                    columnModel.y = item_table_mouse.y
+                    d.tableItemLayout(column)
+                }
             }
             Rectangle{
                 anchors.fill: parent
@@ -352,6 +343,7 @@ Rectangle {
                 }
                 FluLoader{
                     id: item_table_loader
+                    property var tableView: control
                     property var model: item_table_mouse._model
                     property var display: rowModel[columnModel.dataIndex]
                     property var rowModel : model.rowModel
@@ -445,10 +437,6 @@ Rectangle {
         }
     }
 
-    onWidthChanged:{
-        table_view.forceLayout()
-    }
-
     MouseArea{
         id:layout_mouse_table
         hoverEnabled: true
@@ -479,6 +467,9 @@ Rectangle {
                 table_view.flick(0,1)
             }
             delegate: com_table_delegate
+            onWidthChanged: {
+                Qt.callLater(forceLayout)
+            }
         }
     }
 
@@ -851,7 +842,13 @@ Rectangle {
         Connections{
             target: table_view
             function onRowsChanged(){
-                header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+1}))
+                header_vertical.updateRowIndex()
+            }
+        }
+        Connections {
+            target: control
+            function onStartRowIndexChanged(){
+                header_vertical.updateRowIndex()
             }
         }
         Timer{
@@ -861,6 +858,9 @@ Rectangle {
                 header_vertical.forceLayout()
             }
         }
+        function updateRowIndex(){
+            header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+control.startRowIndex}))
+        }
     }
     Item{
         anchors{
@@ -955,18 +955,18 @@ Rectangle {
                     target: d
                     function onTableItemLayout(column){
                         if(item_layout_frozen._index === column){
-                            updateLayout()
+                            Qt.callLater(updateLayout)
                         }
                     }
                 }
                 Connections{
                     target: table_view
                     function onContentXChanged(){
-                        updateLayout()
+                        Qt.callLater(updateLayout)
                     }
                 }
                 function updateLayout(){
-                    width = table_view.columnWidthProvider(_index)
+                    width = Qt.binding(() => table_view.columnWidthProvider(_index))
                     x = Qt.binding(function(){
                         var minX = 0
                         var maxX = table_view.width-width

src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -6,7 +6,7 @@ FluControlBackground{
     property Item inputItem
     id:control
     color: {
-        if(inputItem && inputItem.disabled){
+        if(inputItem && !inputItem.enabled){
             return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
         if(inputItem && inputItem.activeFocus){

src/Qt5/imports/FluentUI/Controls/FluTour.qml

@@ -7,8 +7,10 @@ import FluentUI 1.0
 Popup{
     property var steps : []
     property int targetMargins: 5
+    property int targetRadius: 2
     property Component nextButton: com_next_button
     property Component prevButton: com_prev_button
+    property Component indicator: com_indicator
     property int index : 0
     property string finishText: qsTr("Finish")
     property string nextText: qsTr("Next")
@@ -22,12 +24,12 @@ Popup{
     contentItem: Item{}
     onVisibleChanged: {
         if(visible){
+            d.animationEnabled = false
             control.index = 0
+            d.updatePos()
+            d.animationEnabled = true
         }
     }
-    onIndexChanged: {
-        canvas.requestPaint()
-    }
     Component{
         id: com_next_button
         FluFilledButton{
@@ -50,10 +52,32 @@ Popup{
             }
         }
     }
+    Component{
+        id: com_indicator
+        Row{
+            spacing: 10
+            Repeater{
+                model: total
+                delegate: Rectangle{
+                    width: 8
+                    height: 8
+                    radius: 4
+                    scale: current === index ? 1.2 : 1
+                    color:{
+                        if(current === index){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+                    }
+                }
+            }
+        }
+    }
     Item{
         id:d
         property var window: Window.window
         property point pos: Qt.point(0,0)
+        property bool animationEnabled: true
         property var step: steps[index]
         property var target: {
             if(steps[index]){
@@ -73,15 +97,22 @@ Popup{
             }
             return control.width
         }
+        function updatePos(){
+            if(d.target && d.window){
+                d.pos = d.target.mapToGlobal(0,0)
+                d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
+            }
+        }
+        onTargetChanged: {
+            updatePos()
+        }
     }
     Connections{
         target: d.window
         function onWidthChanged(){
-            canvas.requestPaint()
             timer_delay.restart()
         }
         function onHeightChanged(){
-            canvas.requestPaint()
             timer_delay.restart()
         }
     }
@@ -89,39 +120,128 @@ Popup{
         id: timer_delay
         interval: 200
         onTriggered: {
-            canvas.requestPaint()
+            d.updatePos()
         }
     }
-    Canvas{
+    Item{
-        id: canvas
+        id: targetRect
-        anchors.fill: parent
+        x: d.pos.x - control.targetMargins
-        onPaint: {
+        y: d.pos.y - control.targetMargins
-            d.pos = d.target.mapToGlobal(0,0)
+        width: d.target ? d.target.width + control.targetMargins * 2 : 0
-            d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
+        height: d.target ? d.target.height + control.targetMargins * 2 : 0
-            var ctx = canvas.getContext("2d")
+        Behavior on x {
-            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height)
+            enabled: d.animationEnabled && FluTheme.animationEnabled
-            ctx.save()
+            NumberAnimation {
-            ctx.fillStyle = "#88000000"
+                duration: 167
-            ctx.fillRect(0, 0, canvasSize.width, canvasSize.height)
+            }
-            ctx.globalCompositeOperation = 'destination-out'
-            ctx.fillStyle = 'black'
-            var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
-            drawRoundedRect(rect,2,ctx)
-            ctx.restore()
         }
-        function drawRoundedRect(rect, r, ctx) {
+        Behavior on y {
-            ctx.beginPath();
+            enabled: d.animationEnabled && FluTheme.animationEnabled
-            ctx.moveTo(rect.x + r, rect.y);
+            NumberAnimation {
-            ctx.lineTo(rect.x + rect.width - r, rect.y);
+                duration: 167
-            ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r);
+            }
-            ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r);
+        }
-            ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r);
+        Behavior on width {
-            ctx.lineTo(rect.x + r, rect.y + rect.height);
+            enabled: d.animationEnabled && FluTheme.animationEnabled
-            ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r);
+            NumberAnimation {
-            ctx.lineTo(rect.x, rect.y + r);
+                duration: 167
-            ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r);
+            }
-            ctx.closePath();
+        }
-            ctx.fill()
+        Behavior on height {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
+    }
+    Shape {
+        anchors.fill: parent
+        layer.enabled: true
+        layer.samples: 4
+        layer.smooth: true
+        ShapePath {
+            fillColor: "#88000000"
+            strokeWidth: 0
+            strokeColor: "transparent"
+
+            // draw background
+            PathMove {
+                x: 0
+                y: 0
+            }
+            PathLine {
+                x: control.width
+                y: 0
+            }
+            PathLine {
+                x: control.width
+                y: control.height
+            }
+            PathLine {
+                x: 0
+                y: control.height
+            }
+            PathLine {
+                x: 0
+                y: 0
+            }
+
+            // draw highlight
+            PathMove {
+                x: targetRect.x + control.targetRadius
+                y: targetRect.y
+            }
+            PathLine {
+                x: targetRect.x + targetRect.width - control.targetRadius
+                y: targetRect.y
+            }
+            PathArc {
+                x: targetRect.x + targetRect.width
+                y: targetRect.y + control.targetRadius
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
+
+            PathLine {
+                x: targetRect.x + targetRect.width
+                y: targetRect.y + targetRect.height - control.targetRadius
+            }
+            PathArc {
+                x: targetRect.x + targetRect.width - control.targetRadius
+                y: targetRect.y + targetRect.height
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
+
+            PathLine {
+                x: targetRect.x + control.targetRadius
+                y: targetRect.y + targetRect.height
+            }
+            PathArc {
+                x: targetRect.x
+                y: targetRect.y + targetRect.height - control.targetRadius
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
+
+            PathLine {
+                x: targetRect.x
+                y: targetRect.y + control.targetRadius
+            }
+            PathArc {
+                x: targetRect.x + control.targetRadius
+                y: targetRect.y
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
         }
     }
     FluFrame{
@@ -151,6 +271,18 @@ Popup{
             return 0
         }
         border.width: 0
+        Behavior on x {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
+        Behavior on y {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
         FluShadow{
             radius: 5
         }
@@ -193,10 +325,21 @@ Popup{
                 leftMargin: 15
             }
         }
+        FluLoader{
+            readonly property int total: steps.length
+            readonly property int current: control.index
+            sourceComponent: control.indicator
+            anchors{
+                bottom: parent.bottom
+                left: parent.left
+                bottomMargin: 15
+                leftMargin: 15
+            }
+        }
         FluLoader{
             id: loader_next
             property bool isEnd: control.index === steps.length-1
-            sourceComponent: com_next_button
+            sourceComponent: control.nextButton
             anchors{
                 top: text_desc.bottom
                 topMargin: 10
@@ -207,7 +350,7 @@ Popup{
         FluLoader{
             id: loader_prev
             visible: control.index !== 0
-            sourceComponent: com_prev_button
+            sourceComponent: control.prevButton
             anchors{
                 right: loader_next.left
                 top: loader_next.top
@@ -246,5 +389,17 @@ Popup{
             }
             return 0
         }
+        Behavior on x {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
+        Behavior on y {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
     }
 }

src/Qt5/imports/FluentUI/Controls/FluTreeView.qml

@@ -474,6 +474,7 @@ Rectangle {
                     }
                     return {}
                 }
+                active: rowModel !== undefined && rowModel !== null
                 sourceComponent: {
                     if(column === 0)
                         return com_column

src/Qt5/imports/FluentUI/plugins.qmltypes

@@ -4,7 +4,7 @@ import QtQuick.tooling 1.2
 // It is used for QML tooling purposes only.
 //
 // This file was auto-generated by:
-// 'qmlplugindump -nonrelocatable -noinstantiate FluentUI 1.0 F:/FluentUI/build/Desktop_Qt_5_15_2_MSVC2019_32bit-Release/src'
+// 'qmlplugindump -nonrelocatable -noinstantiate FluentUI 1.0 E:/develop/QtCode/opensource/FluentUI/build/Desktop_Qt_5_15_2_MinGW_64_bit-Release/src'
 
 Module {
     dependencies: ["QtQuick 2.0"]
@@ -231,6 +231,10 @@ Module {
         exportMetaObjectRevisions: [0]
         Property { name: "color"; type: "QColor" }
         Property { name: "radius"; type: "QList<int>" }
+        Property { name: "borderWidth"; type: "double" }
+        Property { name: "borderColor"; type: "QColor" }
+        Property { name: "borderStyle"; type: "Qt::PenStyle" }
+        Property { name: "dashPattern"; type: "QVector<qreal>" }
     }
     Component {
         name: "FluSheetType"
@@ -2776,7 +2780,7 @@ Module {
         }
         Property {
             name: "layoutMacosButtons"
-            type: "FluLoader_QMLTYPE_11"
+            type: "FluLoader_QMLTYPE_12"
             isReadonly: true
             isPointer: true
         }
@@ -2797,12 +2801,16 @@ Module {
         Property { name: "items"; type: "QVariant" }
         Property { name: "emptyText"; type: "string" }
         Property { name: "autoSuggestBoxReplacement"; type: "int" }
+        Property { name: "itemHeight"; type: "int" }
+        Property { name: "itemRows"; type: "int" }
+        Property { name: "showSuggestWhenPressed"; type: "bool" }
         Property { name: "textRole"; type: "string" }
         Property { name: "filter"; type: "QVariant" }
         Signal {
             name: "itemClicked"
             Parameter { name: "data"; type: "QVariant" }
         }
+        Method { name: "showSuggest"; type: "QVariant" }
         Method {
             name: "updateText"
             type: "QVariant"
@@ -2830,8 +2838,9 @@ Module {
         defaultProperty: "data"
         Property { name: "isDot"; type: "bool" }
         Property { name: "showZero"; type: "bool" }
-        Property { name: "count"; type: "int" }
+        Property { name: "count"; type: "QVariant" }
-        Property { name: "topRight"; type: "bool" }
+        Property { name: "max"; type: "int" }
+        Property { name: "position"; type: "string" }
     }
     Component {
         prototype: "QQuickItem"
@@ -2898,6 +2907,7 @@ Module {
         isComposite: true
         defaultProperty: "data"
         Property { name: "autoPlay"; type: "bool" }
+        Property { name: "orientation"; type: "int" }
         Property { name: "loopTime"; type: "int" }
         Property { name: "model"; type: "QVariant" }
         Property { name: "delegate"; type: "QQmlComponent"; isPointer: true }
@@ -2955,12 +2965,12 @@ Module {
         Property { name: "checkedDisableColor"; type: "QColor" }
         Property { name: "disableColor"; type: "QColor" }
         Property { name: "size"; type: "double" }
+        Property { name: "textColor"; type: "QColor" }
         Property { name: "textRight"; type: "bool" }
         Property { name: "textSpacing"; type: "double" }
         Property { name: "animationEnabled"; type: "bool" }
         Property { name: "clickListener"; type: "QVariant" }
         Property { name: "indeterminate"; type: "bool" }
-        Property { name: "textColor"; type: "QColor" }
     }
     Component {
         prototype: "FluRectangle"
@@ -3189,6 +3199,8 @@ Module {
         isComposite: true
         defaultProperty: "content"
         Property { name: "headerText"; type: "string" }
+        Property { name: "headerHeight"; type: "int" }
+        Property { name: "headerDelegate"; type: "QQmlComponent"; isPointer: true }
         Property { name: "expand"; type: "bool" }
         Property { name: "contentHeight"; type: "int" }
         Property { name: "content"; type: "QObject"; isList: true; isReadonly: true }
@@ -3469,15 +3481,15 @@ Module {
         defaultProperty: "data"
         Property { name: "logo"; type: "QUrl" }
         Property { name: "title"; type: "string" }
-        Property { name: "items"; type: "FluObject_QMLTYPE_176"; isPointer: true }
+        Property { name: "items"; type: "FluObject_QMLTYPE_182"; isPointer: true }
-        Property { name: "footerItems"; type: "FluObject_QMLTYPE_176"; isPointer: true }
+        Property { name: "footerItems"; type: "FluObject_QMLTYPE_182"; isPointer: true }
         Property { name: "displayMode"; type: "int" }
         Property { name: "autoSuggestBox"; type: "QQmlComponent"; isPointer: true }
         Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true }
         Property { name: "topPadding"; type: "int" }
         Property { name: "pageMode"; type: "int" }
-        Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_48"; isPointer: true }
+        Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_49"; isPointer: true }
-        Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_48"; isPointer: true }
+        Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_49"; isPointer: true }
         Property { name: "navCompactWidth"; type: "int" }
         Property { name: "navTopMargin"; type: "int" }
         Property { name: "cellHeight"; type: "int" }
@@ -3676,6 +3688,7 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "content"
+        Property { name: "textHighlightColor"; type: "QColor" }
         Property { name: "textNormalColor"; type: "QColor" }
         Property { name: "textHoverColor"; type: "QColor" }
         Property { name: "textSpacing"; type: "int" }
@@ -3772,11 +3785,11 @@ Module {
         Property { name: "normalColor"; type: "QColor" }
         Property { name: "hoverColor"; type: "QColor" }
         Property { name: "disableColor"; type: "QColor" }
+        Property { name: "textColor"; type: "QColor" }
         Property { name: "size"; type: "double" }
         Property { name: "textRight"; type: "bool" }
         Property { name: "textSpacing"; type: "double" }
         Property { name: "clickListener"; type: "QVariant" }
-        Property { name: "textColor"; type: "QColor" }
     }
     Component {
         prototype: "QQuickItem"
@@ -3899,7 +3912,9 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "content"
+        Property { name: "autoResetScroll"; type: "bool" }
         Property { name: "content"; type: "QObject"; isList: true; isReadonly: true }
+        Method { name: "resetScroll"; type: "QVariant" }
         Property { name: "launchMode"; type: "int" }
         Property { name: "animationEnabled"; type: "bool" }
         Property { name: "url"; type: "string" }
@@ -4079,6 +4094,7 @@ Module {
         Property { name: "borderColor"; type: "QColor" }
         Property { name: "horizonalHeaderVisible"; type: "bool" }
         Property { name: "verticalHeaderVisible"; type: "bool" }
+        Property { name: "startRowIndex"; type: "int" }
         Property { name: "selectedBorderColor"; type: "QColor" }
         Property { name: "selectedColor"; type: "QColor" }
         Property { name: "columnWidthProvider"; type: "QVariant" }
@@ -4294,8 +4310,8 @@ Module {
         Property { name: "dotDisableColor"; type: "QColor" }
         Property { name: "textSpacing"; type: "double" }
         Property { name: "textRight"; type: "bool" }
-        Property { name: "clickListener"; type: "QVariant" }
         Property { name: "textColor"; type: "QColor" }
+        Property { name: "clickListener"; type: "QVariant" }
     }
     Component {
         prototype: "QQuickToolTip"
@@ -4314,8 +4330,10 @@ Module {
         defaultProperty: "contentData"
         Property { name: "steps"; type: "QVariant" }
         Property { name: "targetMargins"; type: "int" }
+        Property { name: "targetRadius"; type: "int" }
         Property { name: "nextButton"; type: "QQmlComponent"; isPointer: true }
         Property { name: "prevButton"; type: "QQmlComponent"; isPointer: true }
+        Property { name: "indicator"; type: "QQmlComponent"; isPointer: true }
         Property { name: "index"; type: "int" }
         Property { name: "finishText"; type: "string" }
         Property { name: "nextText"; type: "string" }
@@ -4379,7 +4397,6 @@ Module {
         Property { name: "fitsAppBarWindows"; type: "bool" }
         Property { name: "tintOpacity"; type: "QVariant" }
         Property { name: "blurRadius"; type: "int" }
-        Property { name: "availableEffects"; type: "QVariant"; isReadonly: true }
         Property { name: "appBar"; type: "QQuickItem"; isPointer: true }
         Property { name: "backgroundColor"; type: "QColor" }
         Property { name: "stayTop"; type: "bool" }
@@ -4403,6 +4420,7 @@ Module {
         Property { name: "contentData"; type: "QObject"; isList: true; isReadonly: true }
         Property { name: "effect"; type: "string" }
         Property { name: "effective"; type: "bool"; isReadonly: true }
+        Property { name: "availableEffects"; type: "QStringList"; isReadonly: true }
         Signal {
             name: "initArgument"
             Parameter { name: "argument"; type: "QVariant" }
@@ -4485,7 +4503,6 @@ Module {
         Property { name: "fitsAppBarWindows"; type: "bool" }
         Property { name: "tintOpacity"; type: "QVariant" }
         Property { name: "blurRadius"; type: "int" }
-        Property { name: "availableEffects"; type: "QVariant"; isReadonly: true }
         Property { name: "appBar"; type: "QQuickItem"; isPointer: true }
         Property { name: "backgroundColor"; type: "QColor" }
         Property { name: "stayTop"; type: "bool" }
@@ -4509,6 +4526,7 @@ Module {
         Property { name: "contentData"; type: "QObject"; isList: true; isReadonly: true }
         Property { name: "effect"; type: "string" }
         Property { name: "effective"; type: "bool"; isReadonly: true }
+        Property { name: "availableEffects"; type: "QStringList"; isReadonly: true }
         Signal {
             name: "initArgument"
             Parameter { name: "argument"; type: "QVariant" }

src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -6,9 +6,12 @@ FluTextBox{
     property var items:[]
     property string emptyText: qsTr("No results found")
     property int autoSuggestBoxReplacement: FluentIcons.Search
+    property int itemHeight: 38
+    property int itemRows: 8
+    property bool showSuggestWhenPressed: false
     property string textRole: "title"
     property var filter: function(item){
-        if(item.title.indexOf(control.text)!==-1){
+        if(item[textRole].indexOf(control.text)!==-1){
             return true
         }
         return false
@@ -28,17 +31,11 @@ FluTextBox{
             control.updateText(modelData[textRole])
         }
         function loadData(){
-            var result = []
             if(items==null){
-                list_view.model = result
+                list_view.model = []
                 return
             }
-            items.map(function(item){
+            list_view.model = items.filter(item => control.filter(item))
-                if(control.filter(item)){
-                    result.push(item)
-                }
-            })
-            list_view.model = result
         }
     }
     onActiveFocusChanged: {
@@ -68,7 +65,7 @@ FluTextBox{
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
-                    height: visible ? 38 : 0
+                    height: visible ? control.itemHeight : 0
                     visible: list_view.count === 0
                     FluText{
                         text: emptyText
@@ -81,7 +78,7 @@ FluTextBox{
                 }
                 delegate:FluControl{
                     id: item_control
-                    height: 38
+                    height: control.itemHeight
                     width: control.width
                     onClicked: {
                         d.handleClick(modelData)
@@ -113,7 +110,7 @@ FluTextBox{
         background:Rectangle{
             id: rect_background
             implicitWidth: control.width
-            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
+            implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
             radius: 5
             color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
             border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@@ -123,6 +120,14 @@ FluTextBox{
         }
     }
     onTextChanged: {
+        control.showSuggest()
+    }
+    onPressed: {
+        if(control.showSuggestWhenPressed){
+            control.showSuggest()
+        }
+    }
+    function showSuggest(){
         d.loadData()
         if(d.flagVisible){
             var pos = control.mapToItem(null, 0, 0)

src/Qt6/imports/FluentUI/Controls/FluBadge.qml

@@ -5,19 +5,15 @@ import FluentUI
 Rectangle{
     property bool isDot: false
     property bool showZero: false
-    property int count: 0
+    property var count: 0
-    property bool topRight: false
+    property int max: 99
+    property string position: "" // topLeft, topRight, bottomLeft, bottomRight
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
         if(isDot)
             return 10
-        if(count<10){
+        return content_text.implicitWidth + 12
-            return 20
-        }else if(count<100){
-            return 30
-        }
-        return 40
     }
     height: {
         if(isDot)
@@ -31,49 +27,74 @@ Rectangle{
     }
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
-    anchors{
+    anchors {
+        left: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
+        }
         right: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.right
+                return undefined
-            return undefined
+            }
+            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
         }
         top: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.top
+                return undefined
-            return undefined
+            }
+            return (position === "topLeft" || position === "topRight") ? parent.top : undefined
+        }
+        bottom: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
+        }
+        leftMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         rightMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return -(control.width/2)
             }
-            return 0
+            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         topMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return  -10
             }
-            return 0
+            return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
+        }
+        bottomMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
         }
     }
     visible: {
-        if(showZero)
+        if(typeof(count) === "number"){
-            return true
+            return showZero ? true : count !== 0
-        return count!==0
+        }
+        return true
     }
     FluText{
+        id: content_text
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
         visible: !isDot
         text:{
-            if(count<100)
+            if(typeof(count) === "string"){
                 return count
-            return "100+"
+            }else if(typeof(count) === "number"){
+                return count <= max ? count.toString() : "%1+".arg(max.toString())
+            }
+            return ""
         }
     }
 }

src/Qt6/imports/FluentUI/Controls/FluCarousel.qml

@@ -4,6 +4,7 @@ import FluentUI
 
 Item {
     property bool autoPlay: true
+    property int orientation: Qt.Horizontal
     property int loopTime: 2000
     property var model
     property Component delegate
@@ -14,7 +15,7 @@ Item {
     property int indicatorMarginTop: 0
     property int indicatorMarginBottom: 20
     property int indicatorSpacing: 10
-    property alias indicatorAnchors: layout_indicator.anchors
+    property alias indicatorAnchors: indicator_loader.anchors
     property Component indicatorDelegate : com_indicator
     id:control
     width: 400
@@ -24,13 +25,24 @@ Item {
     }
     QtObject{
         id:d
-        property bool flagXChanged: true
+        property bool isManualMoving: false
         property bool isAnimEnable: control.autoPlay && list_view.count>3
+        onIsAnimEnableChanged: {
+            if(isAnimEnable){
+                timer_run.restart()
+            }else{
+                timer_run.stop()
+            }
+        }
         function setData(data){
-            if(!data){
+            if(!data || !Array.isArray(data)){
                 return
             }
             content_model.clear()
+            list_view.resetPos()
+            if(data.length === 0){
+                return
+            }
             content_model.append(data[data.length-1])
             content_model.append(data)
             content_model.append(data[0])
@@ -49,7 +61,7 @@ Item {
         clip: true
         boundsBehavior: ListView.StopAtBounds
         model:content_model
-        maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
+        maximumFlickVelocity: 4 * (control.orientation === Qt.Vertical ? height : width)
         preferredHighlightBegin: 0
         preferredHighlightEnd: 0
         highlightMoveDuration: 0
@@ -63,7 +75,7 @@ Item {
                 d.setData(control.model)
             }
         }
-        orientation : ListView.Horizontal
+        orientation : control.orientation
         delegate: Item{
             id:item_control
             width: ListView.view.width
@@ -88,31 +100,63 @@ Item {
             }
         }
         onMovementEnded:{
-            currentIndex = list_view.contentX/list_view.width
+            d.isManualMoving = false
-            if(currentIndex === 0){
+            list_view.highlightMoveDuration = 0
-                currentIndex = list_view.count-2
+            if(control.orientation === Qt.Vertical){
-            }else if(currentIndex === list_view.count-1){
+                currentIndex = (list_view.contentY - list_view.originY) / list_view.height
-                currentIndex = 1
+                if(currentIndex === 0){
+                    currentIndex = list_view.count - 2
+                }else if(currentIndex === list_view.count - 1) {
+                    currentIndex = 1
+                }
+            } else {
+                currentIndex = (list_view.contentX - list_view.originX) / list_view.width
+                if(currentIndex === 0){
+                    currentIndex = list_view.count - 2
+                }else if(currentIndex === list_view.count - 1){
+                    currentIndex = 1
+                }
+            }
+            if(d.isAnimEnable){
+                timer_run.restart()
             }
-            d.flagXChanged = false
-            timer_run.restart()
         }
         onMovementStarted: {
-            d.flagXChanged = true
+            d.isManualMoving = true
             timer_run.stop()
         }
         onContentXChanged: {
-            if(d.flagXChanged){
+            if(d.isManualMoving && control.orientation === Qt.Horizontal){
-                var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
+                const range = getPosRange(list_view.width, currentIndex)
-                var minY = Math.max(0,(list_view.width*(currentIndex-1)))
+                if(contentX >= range.max){
-                if(contentX>=maxX){
+                    contentX = range.max
-                    contentX = maxX
                 }
-                if(contentX<=minY){
+                if(contentX <= range.min){
-                    contentX = minY
+                    contentX = range.min
                 }
             }
         }
+        onContentYChanged: {
+            if(d.isManualMoving && control.orientation === Qt.Vertical){
+                const range = getPosRange(list_view.height, currentIndex)
+                if(contentY >= range.max){
+                    contentY = range.max
+                }
+                if(contentY <= range.min){
+                    contentY = range.min
+                }
+            }
+        }
+        function resetPos() {
+            contentX = 0
+            contentY = 0
+        }
+        function getPosRange(size, index) {
+            return {
+                "min": Math.max(0, size * (index - 1)),
+                "max": Math.min(size * (index + 1), list_view.count * size)
+            }
+        }
     }
     Component{
         id:com_indicator
@@ -137,9 +181,9 @@ Item {
             }
         }
     }
-    Row{
+
-        id:layout_indicator
+    Loader{
-        spacing: control.indicatorSpacing
+        id: indicator_loader
         anchors{
             horizontalCenter:(indicatorGravity & Qt.AlignHCenter) ? parent.horizontalCenter : undefined
             verticalCenter: (indicatorGravity & Qt.AlignVCenter) ? parent.verticalCenter : undefined
@@ -152,28 +196,66 @@ Item {
             rightMargin: control.indicatorMarginBottom
             topMargin: control.indicatorMarginBottom
         }
-        visible: showIndicator
+        active: showIndicator
-        Repeater{
+        sourceComponent: control.orientation === Qt.Vertical ? column_indicator : row_indicator
-            id:repeater_indicator
+    }
-            model: list_view.count
+
-            FluLoader{
+    Component{
-                property int displayIndex: {
+        id: row_indicator
-                    if(index === 0)
+        Row{
-                        return list_view.count-3
+            id:layout_indicator
-                    if(index === list_view.count-1)
+            spacing: control.indicatorSpacing
-                        return 0
+            Repeater{
-                    return index-1
+                id:repeater_indicator
-                }
+                model: list_view.count
-                property int realIndex: index
+                FluLoader{
-                property bool checked: list_view.currentIndex === index
+                    property int displayIndex: {
-                sourceComponent: {
+                        if(index === 0)
-                    if(index===0 || index===list_view.count-1)
+                            return list_view.count-3
-                        return undefined
+                        if(index === list_view.count-1)
-                    return control.indicatorDelegate
+                            return 0
+                        return index-1
+                    }
+                    property int realIndex: index
+                    property bool checked: list_view.currentIndex === index
+                    sourceComponent: {
+                        if(index===0 || index===list_view.count-1)
+                            return undefined
+                        return control.indicatorDelegate
+                    }
                 }
             }
         }
     }
+
+    Component{
+        id: column_indicator
+        Column{
+            id:layout_indicator
+            spacing: control.indicatorSpacing
+            Repeater{
+                id:repeater_indicator
+                model: list_view.count
+                FluLoader{
+                    property int displayIndex: {
+                        if(index === 0)
+                            return list_view.count-3
+                        if(index === list_view.count-1)
+                            return 0
+                        return index-1
+                    }
+                    property int realIndex: index
+                    property bool checked: list_view.currentIndex === index
+                    sourceComponent: {
+                        if(index===0 || index===list_view.count-1)
+                            return undefined
+                        return control.indicatorDelegate
+                    }
+                }
+            }
+        }
+    }
+
     Timer{
         id:timer_anim
         interval: 250
@@ -195,10 +277,10 @@ Item {
         }
     }
     function changedIndex(index){
-        d.flagXChanged = true
+        d.isManualMoving = true
         timer_run.stop()
         list_view.currentIndex = index
-        d.flagXChanged = false
+        d.isManualMoving = false
         if(d.isAnimEnable){
             timer_run.restart()
         }

src/Qt6/imports/FluentUI/Controls/FluComboBox.qml

@@ -55,7 +55,7 @@ T.ComboBox {
         font:control.font
         readOnly: control.down
         color: {
-            if(control.disabled) {
+            if(!control.enabled) {
                 return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
             }
             return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -97,7 +97,7 @@ T.ComboBox {
             anchors.margins: -2
         }
         color:{
-            if(disabled){
+            if(!enabled){
                 return disableColor
             }
             return hovered ? hoverColor :normalColor

src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml

@@ -178,7 +178,12 @@ FluButton {
                                     }
                                     if(type === 1){
                                         text_month.text = model
+                                        let day = list_view_3.model[list_view_3.currentIndex]
                                         list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
+                                        if(list_view_3.model.indexOf(day) === -1){
+                                            day = list_view_3.model[list_view_3.model.length - 1]
+                                        }
+                                        list_view_3.currentIndex = list_view_3.model.indexOf(day)
                                         text_day.text = list_view_3.model[list_view_3.currentIndex]
 
                                     }

src/Qt6/imports/FluentUI/Controls/FluMenuBarItem.qml

@@ -7,7 +7,7 @@ T.MenuBarItem {
     property bool disabled: false
     property color textColor: {
         if(FluTheme.dark){
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(131/255,131/255,131/255,1)
             }
             if(pressed){
@@ -15,7 +15,7 @@ T.MenuBarItem {
             }
             return Qt.rgba(1,1,1,1)
         }else{
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(160/255,160/255,160/255,1)
             }
             if(pressed){

src/Qt6/imports/FluentUI/Controls/FluProgressBar.qml

@@ -15,13 +15,6 @@ ProgressBar{
         id:d
         property real _radius: strokeWidth/2
     }
-    onIndeterminateChanged:{
-        if(!indeterminate){
-            animator_x.duration = 0
-            rect_progress.x = 0
-            animator_x.duration = control.duration
-        }
-    }
     background: Rectangle {
         implicitWidth: 150
         implicitHeight: control.strokeWidth
@@ -46,6 +39,11 @@ ProgressBar{
                 id: animator_x
                 running: control.indeterminate && control.visible
                 loops: Animation.Infinite
+                onRunningChanged: {
+                    if(!running){
+                        rect_progress.x = 0
+                    }
+                }
                 PropertyAnimation {
                     from: -rect_progress.width
                     to: control.width + rect_progress.width

src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml

@@ -140,13 +140,13 @@ T.SpinBox {
         radius: 4
         border.width: 1
         border.color: {
-            if(contentItem.disabled){
+            if(!contentItem.enabled){
                 return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
             }
             return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
         }
         color: {
-            if(contentItem.disabled){
+            if(!contentItem.enabled){
                 return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
             }
             if(contentItem.activeFocus){

src/Qt6/imports/FluentUI/Controls/FluTableView.qml

@@ -17,6 +17,7 @@ Rectangle {
     property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1)
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
+    property int startRowIndex: 1
     property color selectedBorderColor: FluTheme.primaryColor
     property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
     property alias view: table_view
@@ -266,30 +267,18 @@ Rectangle {
                 d.rowHoverIndex = row
             }
             onWidthChanged: {
-                if(editVisible){
+                updatePosition()
-                    updateEditPosition()
-                }
-                if(isMainTable){
-                    updateTableItem()
-                }
             }
             onHeightChanged: {
-                if(editVisible){
+                updatePosition()
-                    updateEditPosition()
-                }
-                if(isMainTable){
-                    updateTableItem()
-                }
             }
             onXChanged: {
-                if(editVisible){
+                updatePosition()
-                    updateEditPosition()
-                }
-                if(isMainTable){
-                    updateTableItem()
-                }
             }
             onYChanged: {
+                updatePosition()
+            }
+            function updatePosition(){
                 if(editVisible){
                     updateEditPosition()
                 }
@@ -310,9 +299,11 @@ Rectangle {
             }
             function updateTableItem(){
                 var columnModel = control.columnSource[column]
-                columnModel.x = item_table_mouse.x
+                if(columnModel.x !== item_table_mouse.x || columnModel.y !== item_table_mouse.y){
-                columnModel.y = item_table_mouse.y
+                    columnModel.x = item_table_mouse.x
-                d.tableItemLayout(column)
+                    columnModel.y = item_table_mouse.y
+                    d.tableItemLayout(column)
+                }
             }
             Rectangle{
                 anchors.fill: parent
@@ -352,6 +343,7 @@ Rectangle {
                 }
                 FluLoader{
                     id: item_table_loader
+                    property var tableView: control
                     property var model: item_table_mouse._model
                     property var display: rowModel[columnModel.dataIndex]
                     property var rowModel : model.rowModel
@@ -445,10 +437,6 @@ Rectangle {
         }
     }
 
-    onWidthChanged:{
-        table_view.forceLayout()
-    }
-
     MouseArea{
         id:layout_mouse_table
         hoverEnabled: true
@@ -479,6 +467,9 @@ Rectangle {
                 table_view.flick(0,1)
             }
             delegate: com_table_delegate
+            onWidthChanged: {
+                Qt.callLater(forceLayout)
+            }
         }
     }
 
@@ -851,7 +842,13 @@ Rectangle {
         Connections{
             target: table_view
             function onRowsChanged(){
-                header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+1}))
+                header_vertical.updateRowIndex()
+            }
+        }
+        Connections {
+            target: control
+            function onStartRowIndexChanged(){
+                header_vertical.updateRowIndex()
             }
         }
         Timer{
@@ -861,6 +858,9 @@ Rectangle {
                 header_vertical.forceLayout()
             }
         }
+        function updateRowIndex(){
+            header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+control.startRowIndex}))
+        }
     }
     Item{
         anchors{
@@ -955,18 +955,18 @@ Rectangle {
                     target: d
                     function onTableItemLayout(column){
                         if(item_layout_frozen._index === column){
-                            updateLayout()
+                            Qt.callLater(updateLayout)
                         }
                     }
                 }
                 Connections{
                     target: table_view
                     function onContentXChanged(){
-                        updateLayout()
+                        Qt.callLater(updateLayout)
                     }
                 }
                 function updateLayout(){
-                    width = table_view.columnWidthProvider(_index)
+                    width = Qt.binding(() => table_view.columnWidthProvider(_index))
                     x = Qt.binding(function(){
                         var minX = 0
                         var maxX = table_view.width-width

src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -6,7 +6,7 @@ FluControlBackground{
     property Item inputItem
     id:control
     color: {
-        if(inputItem && inputItem.disabled){
+        if(inputItem && !inputItem.enabled){
             return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
         if(inputItem && inputItem.activeFocus){

src/Qt6/imports/FluentUI/Controls/FluTour.qml

@@ -7,8 +7,10 @@ import FluentUI
 Popup{
     property var steps : []
     property int targetMargins: 5
+    property int targetRadius: 2
     property Component nextButton: com_next_button
     property Component prevButton: com_prev_button
+    property Component indicator: com_indicator
     property int index : 0
     property string finishText: qsTr("Finish")
     property string nextText: qsTr("Next")
@@ -22,12 +24,12 @@ Popup{
     contentItem: Item{}
     onVisibleChanged: {
         if(visible){
+            d.animationEnabled = false
             control.index = 0
+            d.updatePos()
+            d.animationEnabled = true
         }
     }
-    onIndexChanged: {
-        canvas.requestPaint()
-    }
     Component{
         id: com_next_button
         FluFilledButton{
@@ -50,10 +52,32 @@ Popup{
             }
         }
     }
+    Component{
+        id: com_indicator
+        Row{
+            spacing: 10
+            Repeater{
+                model: total
+                delegate: Rectangle{
+                    width: 8
+                    height: 8
+                    radius: 4
+                    scale: current === index ? 1.2 : 1
+                    color:{
+                        if(current === index){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+                    }
+                }
+            }
+        }
+    }
     Item{
         id:d
         property var window: Window.window
         property point pos: Qt.point(0,0)
+        property bool animationEnabled: true
         property var step: steps[index]
         property var target: {
             if(steps[index]){
@@ -73,15 +97,22 @@ Popup{
             }
             return control.width
         }
+        function updatePos(){
+            if(d.target && d.window){
+                d.pos = d.target.mapToGlobal(0,0)
+                d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
+            }
+        }
+        onTargetChanged: {
+            updatePos()
+        }
     }
     Connections{
         target: d.window
         function onWidthChanged(){
-            canvas.requestPaint()
             timer_delay.restart()
         }
         function onHeightChanged(){
-            canvas.requestPaint()
             timer_delay.restart()
         }
     }
@@ -89,39 +120,128 @@ Popup{
         id: timer_delay
         interval: 200
         onTriggered: {
-            canvas.requestPaint()
+            d.updatePos()
         }
     }
-    Canvas{
+    Item{
-        id: canvas
+        id: targetRect
-        anchors.fill: parent
+        x: d.pos.x - control.targetMargins
-        onPaint: {
+        y: d.pos.y - control.targetMargins
-            d.pos = d.target.mapToGlobal(0,0)
+        width: d.target ? d.target.width + control.targetMargins * 2 : 0
-            d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
+        height: d.target ? d.target.height + control.targetMargins * 2 : 0
-            var ctx = canvas.getContext("2d")
+        Behavior on x {
-            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height)
+            enabled: d.animationEnabled && FluTheme.animationEnabled
-            ctx.save()
+            NumberAnimation {
-            ctx.fillStyle = "#88000000"
+                duration: 167
-            ctx.fillRect(0, 0, canvasSize.width, canvasSize.height)
+            }
-            ctx.globalCompositeOperation = 'destination-out'
-            ctx.fillStyle = 'black'
-            var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
-            drawRoundedRect(rect,2,ctx)
-            ctx.restore()
         }
-        function drawRoundedRect(rect, r, ctx) {
+        Behavior on y {
-            ctx.beginPath();
+            enabled: d.animationEnabled && FluTheme.animationEnabled
-            ctx.moveTo(rect.x + r, rect.y);
+            NumberAnimation {
-            ctx.lineTo(rect.x + rect.width - r, rect.y);
+                duration: 167
-            ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r);
+            }
-            ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r);
+        }
-            ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r);
+        Behavior on width {
-            ctx.lineTo(rect.x + r, rect.y + rect.height);
+            enabled: d.animationEnabled && FluTheme.animationEnabled
-            ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r);
+            NumberAnimation {
-            ctx.lineTo(rect.x, rect.y + r);
+                duration: 167
-            ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r);
+            }
-            ctx.closePath();
+        }
-            ctx.fill()
+        Behavior on height {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
+    }
+    Shape {
+        anchors.fill: parent
+        layer.enabled: true
+        layer.samples: 4
+        layer.smooth: true
+        ShapePath {
+            fillColor: "#88000000"
+            strokeWidth: 0
+            strokeColor: "transparent"
+
+            // draw background
+            PathMove {
+                x: 0
+                y: 0
+            }
+            PathLine {
+                x: control.width
+                y: 0
+            }
+            PathLine {
+                x: control.width
+                y: control.height
+            }
+            PathLine {
+                x: 0
+                y: control.height
+            }
+            PathLine {
+                x: 0
+                y: 0
+            }
+
+            // draw highlight
+            PathMove {
+                x: targetRect.x + control.targetRadius
+                y: targetRect.y
+            }
+            PathLine {
+                x: targetRect.x + targetRect.width - control.targetRadius
+                y: targetRect.y
+            }
+            PathArc {
+                x: targetRect.x + targetRect.width
+                y: targetRect.y + control.targetRadius
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
+
+            PathLine {
+                x: targetRect.x + targetRect.width
+                y: targetRect.y + targetRect.height - control.targetRadius
+            }
+            PathArc {
+                x: targetRect.x + targetRect.width - control.targetRadius
+                y: targetRect.y + targetRect.height
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
+
+            PathLine {
+                x: targetRect.x + control.targetRadius
+                y: targetRect.y + targetRect.height
+            }
+            PathArc {
+                x: targetRect.x
+                y: targetRect.y + targetRect.height - control.targetRadius
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
+
+            PathLine {
+                x: targetRect.x
+                y: targetRect.y + control.targetRadius
+            }
+            PathArc {
+                x: targetRect.x + control.targetRadius
+                y: targetRect.y
+                radiusX: control.targetRadius
+                radiusY: control.targetRadius
+                useLargeArc: false
+                direction: PathArc.Clockwise
+            }
         }
     }
     FluFrame{
@@ -151,6 +271,18 @@ Popup{
             return 0
         }
         border.width: 0
+        Behavior on x {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
+        Behavior on y {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
         FluShadow{
             radius: 5
         }
@@ -193,10 +325,21 @@ Popup{
                 leftMargin: 15
             }
         }
+        FluLoader{
+            readonly property int total: steps.length
+            readonly property int current: control.index
+            sourceComponent: control.indicator
+            anchors{
+                bottom: parent.bottom
+                left: parent.left
+                bottomMargin: 15
+                leftMargin: 15
+            }
+        }
         FluLoader{
             id: loader_next
             property bool isEnd: control.index === steps.length-1
-            sourceComponent: com_next_button
+            sourceComponent: control.nextButton
             anchors{
                 top: text_desc.bottom
                 topMargin: 10
@@ -207,7 +350,7 @@ Popup{
         FluLoader{
             id: loader_prev
             visible: control.index !== 0
-            sourceComponent: com_prev_button
+            sourceComponent: control.prevButton
             anchors{
                 right: loader_next.left
                 top: loader_next.top
@@ -246,5 +389,17 @@ Popup{
             }
             return 0
         }
+        Behavior on x {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
+        Behavior on y {
+            enabled: d.animationEnabled && FluTheme.animationEnabled
+            NumberAnimation {
+                duration: 167
+            }
+        }
     }
 }

src/Qt6/imports/FluentUI/Controls/FluTreeView.qml

@@ -474,6 +474,7 @@ Rectangle {
                     }
                     return {}
                 }
+                active: rowModel !== undefined && rowModel !== null
                 sourceComponent: {
                     if(column === 0)
                         return com_column

src/fluentuiplugin.cpp

@@ -5,9 +5,9 @@
 FluentUIPlugin::FluentUIPlugin() = default;
 
 void FluentUIPlugin::registerTypes(const char *uri) {
-    FluentUI::getInstance()->registerTypes(uri);
+    FluentUI::registerTypes(uri);
 }
 
 void FluentUIPlugin::initializeEngine(QQmlEngine *engine, const char *uri) {
-    FluentUI::getInstance()->initializeEngine(engine, uri);
+    FluentUI::initializeEngine(engine, uri);
 }