From ff82a1e21ce396c345038b4cb340f10eeca89cf2 Mon Sep 17 00:00:00 2001
From: Harry Huang <harryhuang2652@qq.com>
Date: Thu, 8 Feb 2024 13:50:52 +0800
Subject: [PATCH] UI Reconstruction

---
 assets/UI/BehaviorModule.fxml                 |   5 +-
 assets/UI/Homepage.fxml                       |   0
 assets/UI/Main.css                            | 164 +++++++---
 assets/UI/ModelsModule.fxml                   | 225 +++++++++----
 assets/UI/RootModule.fxml                     |  48 +--
 assets/UI/SettingsModule.fxml                 |  68 +---
 core/src/cn/harryh/arkpets/Const.java         |   9 +-
 core/src/cn/harryh/arkpets/utils/IOUtils.java |  78 ++++-
 desktop/src/cn/harryh/arkpets/ArkHomeFX.java  |  29 +-
 .../arkpets/controllers/BehaviorModule.java   |   2 +-
 .../arkpets/controllers/ModelsModule.java     | 302 ++++++++++++++----
 .../arkpets/controllers/RootModule.java       |  68 ++--
 .../arkpets/controllers/SettingsModule.java   | 109 +------
 .../arkpets/guitasks/CheckAppUpdateTask.java  |  11 +-
 .../guitasks/CheckModelUpdateTask.java        |  26 +-
 .../arkpets/guitasks/VerifyModelsTask.java    |  10 +-
 .../cn/harryh/arkpets/guitasks/ZipTask.java   |  55 ++++
 .../harryh/arkpets/utils/GuiComponents.java   | 208 ++++++------
 .../cn/harryh/arkpets/utils/GuiPrefabs.java   | 141 ++++++--
 19 files changed, 975 insertions(+), 583 deletions(-)
 delete mode 100644 assets/UI/Homepage.fxml
 create mode 100644 desktop/src/cn/harryh/arkpets/guitasks/ZipTask.java

diff --git a/assets/UI/BehaviorModule.fxml b/assets/UI/BehaviorModule.fxml
index 7867106d..3787fdfb 100644
--- a/assets/UI/BehaviorModule.fxml
+++ b/assets/UI/BehaviorModule.fxml
@@ -5,12 +5,11 @@
     At GPL-3.0 License
 -->
 
+<!-- ********* Wrapper 2 ********* -->
 <?import com.jfoenix.controls.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
-
-<!-- ********* Wrapper 2 ********* -->
-<Pane prefHeight="372.0" prefWidth="460.0" styleClass="wrapper"
+<Pane prefHeight="376.0" prefWidth="460.0" styleClass="wrapper" stylesheets="@Main.css"
       xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="cn.harryh.arkpets.controllers.BehaviorModule">
     <ScrollPane layoutX="10.0" layoutY="11.0" prefHeight="350.0" prefWidth="440.0" styleClass="scroll-v">
diff --git a/assets/UI/Homepage.fxml b/assets/UI/Homepage.fxml
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/UI/Main.css b/assets/UI/Main.css
index cf8735a3..d32c94d2 100644
--- a/assets/UI/Main.css
+++ b/assets/UI/Main.css
@@ -52,7 +52,8 @@ JFXButton {
 -fx-translate-y: 0.5px;
 }
 
-.btn-icon SVGPath {
+Label > SVGPath, Label > AnchorPane, Label > AnchorPane > SVGPath,
+JFXButton > SVGPath, JFXButton > AnchorPane, JFXButton > AnchorPane > SVGPath {
 -fx-fill: inherit;
 }
 
@@ -91,11 +92,22 @@ JFXButton {
 -fx-border-color: #204880;
 }
 
-.btn-secondary .btn-icon {
+.btn-secondary .btn-icon, .btn-iconified-secondary .btn-icon {
 /* Regular */
 -fx-fill: #204880;
 }
 
+.btn-iconified-secondary {
+/* Regular */
+-fx-text-fill: #204880;
+-fx-background-color: #FFFFFF;
+-fx-background-radius: 38.2%;
+-fx-border-color: #204880;
+-fx-border-radius: 38.2%;
+-fx-border-width: 1px;
+-fx-border-style: solid;
+}
+
 /*******************************************************************************
  *                                                                             *
  * 3. Sidebar and its Menu Buttons                                             *
@@ -103,7 +115,7 @@ JFXButton {
  ******************************************************************************/
 
 #Sidebar {
--fx-background-color: #95B7E5;
+-fx-background-color: #95B6E5;
 }
 
 #Title {
@@ -116,6 +128,8 @@ JFXButton {
 /* Regular */
 -fx-padding: 0 0 0 20px;
 -fx-font-size: 18px;
+-fx-font-weight: bold;
+-fx-fill: #204880;
 -fx-text-fill: #204880;
 -fx-text-alignment: left;
 -fx-background-color: #FFFFFF;
@@ -128,24 +142,17 @@ JFXButton {
 
 .menu-btn-active {
 /* Active */
+-fx-fill: #FFFFFF;
 -fx-text-fill: #FFFFFF;
 -fx-background-color: #204880;
 }
 
-.menu-btn SVGPath {
-/* Regular */
--fx-fill: #204880;
-}
-
-.menu-btn-active SVGPath {
-/* Hover & Active */
--fx-fill: #FFFFFF;
-}
-
 #Start-btn {
 /* Regular */
 -fx-padding: 0 0 0 20px;
 -fx-font-size: 18px;
+-fx-font-weight: bold;
+-fx-fill: #FFFFFF;
 -fx-text-fill: #FFFFFF;
 -fx-text-alignment: left;
 -fx-background-color: #204880;
@@ -156,16 +163,6 @@ JFXButton {
 -fx-border-style: solid;
 }
 
-#Start-btn SVGPath {
-/* Regular */
--fx-fill: #FFFFFF;
-}
-
-#Start-menu-btn:hover SVGPath, #Start-btn:focused SVGPath {
-/* Hover & Focused */
--fx-fill: #EEEEEE;
-}
-
 /*******************************************************************************
  *                                                                             *
  * 4. Contents in wrappers                                                     *
@@ -173,22 +170,72 @@ JFXButton {
  ******************************************************************************/
 
 .wrapper {
--fx-padding: 5px 10px 5px 10px;
+-fx-padding: 15px;
 }
 
-#Search-models-bar {
--fx-background-radius: 8px;
--fx-background-color: #95B7E5;
+.major-tool-bar-upper, .major-tool-bar-lower {
+-fx-background-color: #95B6E5;
 -fx-border-style: none;
+-fx-padding: 4px 8px 4px 8px;
+}
+
+.major-tool-bar-upper {
+-fx-background-radius: 8px 8px 8px 0;
+}
+
+.major-tool-bar-lower {
+-fx-background-radius: 0 0 8px 8px;
+}
+
+.info-pane-light {
+-fx-background-color: #FFFFFF;
+-fx-background-radius: 3px;
+-fx-border-color: #95B6E588;
+-fx-border-radius: 3px;
+-fx-border-width: 1.25px;
+-fx-border-style: solid;
+}
+
+.info-pane-light > VBox {
+-fx-padding: 8px;
+}
+
+.flow-wrapper {
+-fx-border-color: #95B6E588;
+-fx-border-width: 1.25px 0 0 0;
+-fx-border-style: solid;
+-fx-fit-to-width: true;
+-fx-fit-to-height: true;
+}
+
+.tag-flow {
+-fx-hgap: 4px;
+-fx-vgap: 6px;
+-fx-padding: 6px 4px 6px 4px;
+}
+
+.btn-flow {
+-fx-hgap: 2px;
+-fx-vgap: 4px;
+-fx-padding: 4px 0 4px 0;
+}
+
+#Search-models-status {
+-fx-fill: #204880;
+-fx-font-size: 11px;
+-fx-text-fill: #204880;
+-fx-label-padding: 0 2px 0 2px;
 }
 
 #Search-models-list {
 -fx-padding: 4px;
+-fx-background-radius: 3px;
 }
 
 .Search-models-item {
 /* Regular */
 -fx-cursor: hand;
+-fx-padding: 4px 2px 4px 2px;
 -fx-text-fill: #505050;
 -fx-background-color: transparent;
 -fx-focus-traversable: true;
@@ -249,28 +296,45 @@ JFXButton {
 }
 
 .info-primary {
--fx-font-size: 16px;
+-fx-font-size: 18px;
 -fx-text-fill: #202020;
 -fx-font-weight: bold;
--fx-label-padding: 4px 2px 4px 2px;
+-fx-label-padding: 3px 1px 3px 1px;
+-fx-wrap-text: true;
 }
 
 .info-secondary {
 -fx-font-size: 12px;
--fx-font-weight: normal;
 -fx-text-fill: #808080;
--fx-label-padding: 2px;
+-fx-font-weight: normal;
+-fx-label-padding: 2px 1px 2px 1px;
+-fx-wrap-text: false;
 }
 
-.info-tag {
--fx-font-size: 10px;
+.info-type-badge {
+-fx-font-size: 12px;
+-fx-font-weight: bold;
+-fx-text-fill: #FFFFFF;
+-fx-text-alignment: justify;
+-fx-background-color: #204880DD;
 -fx-background-radius: 6px;
 -fx-label-padding: 2px 4px 2px 4px;
 }
 
-.info-tag-theme {
+.info-tag-badge, .info-tag-badge-active {
+-fx-font-size: 11px;
 -fx-text-fill: #FFFFFF;
--fx-background-color: #4D7999;
+-fx-background-radius: 0;
+-fx-max-height: 14px;
+-fx-effect: dropshadow(gaussian, #00000040, 2.5, 0.25, 0.5, 1);
+}
+
+.info-tag-badge {
+-fx-background-color: #8492A5;
+}
+
+.info-tag-badge-active {
+-fx-background-color: #204880EE;
 }
 
 .config-group-title {
@@ -342,21 +406,21 @@ JFXButton {
 }
 
 /* Progress bar's outer track */
-ProgressBar > .track{
+ProgressBar > .track {
 -fx-background-color: #DDDDDDDD;
 -fx-background-radius: 2.5px;
 -fx-background-insets: 0;
 }
 
 /* Progress bar's inner bar */
-ProgressBar > .bar, ProgressBar:indeterminate > .bar{
+ProgressBar > .bar, ProgressBar:indeterminate > .bar {
 -fx-background-color: #204880DD;
 -fx-background-radius: 2.5px;
 -fx-background-insets: 0;
 }
 
 #Loading-failure-tip, #Loading-waiting-tip {
--fx-background-color: #F4F4F4E0;
+-fx-background-color: #F4F4F4D0;
 }
 
 #Loading-failure-tip-text {
@@ -383,8 +447,9 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
 }
 
 #Title-bar JFXButton {
+-fx-fill: #FFFFFF;
 -fx-background-color: #204880;
--fx-border-radius: 0px;
+-fx-background-radius: 0;
 -fx-border-style: none;
 -fx-min-width: 24px;
 -fx-min-height: 24px;
@@ -393,10 +458,6 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
 -fx-focus-traversable: false;
 }
 
-#Title-bar JFXButton SVGPath {
--fx-fill: #FFFFFF;
-}
-
 #Title-minimize-btn:hover, #Title-minimize-btn:focused {
 -fx-background-color: #305890;
 }
@@ -411,6 +472,13 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
  *                                                                             *
  ******************************************************************************/
 
+.scroll-bar > .thumb {
+-fx-cursor: hand;
+-fx-background-color: #BCBCC2;
+-fx-background-insets: 0;
+-fx-background-radius: 2px;
+}
+
 .scroll-bar:vertical > .track-background, .scroll-bar:horizontal > .track-background {
 -fx-cursor: default;
 -fx-background-color: #F1F1F5;
@@ -418,13 +486,6 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
 -fx-background-radius: 1px;
 }
 
-.scroll-bar:vertical > .thumb, .scroll-bar:horizontal > .thumb {
--fx-cursor: hand;
--fx-background-color: #BCBCC2;
--fx-background-insets: 0;
--fx-background-radius: 2px;
-}
-
 .scroll-bar > .increment-button, .scroll-bar > .decrement-button,
 .scroll-bar:hover > .increment-button, .scroll-bar:hover > .decrement-button {
 -fx-cursor: hand;
@@ -439,6 +500,7 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
 -fx-padding: 2px 5px 2px 5px;
 }
 
+/* All Arrows */
 .scroll-bar > .increment-button > .increment-arrow, .scroll-bar > .decrement-button > .decrement-arrow {
 -fx-background-color: #9696A0;
 }
@@ -472,7 +534,7 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
 -fx-background-insets: 0;
 }
 
-.scroll-v {
+.scroll-v, .flow-wrapper {
 -fx-hbar-policy: never;
 -fx-vbar-policy: as-needed;
 }
diff --git a/assets/UI/ModelsModule.fxml b/assets/UI/ModelsModule.fxml
index 61ad8871..9e0467f8 100644
--- a/assets/UI/ModelsModule.fxml
+++ b/assets/UI/ModelsModule.fxml
@@ -5,89 +5,86 @@
     At GPL-3.0 License
 -->
 
+<!-- ********* Wrapper 1 ********* -->
 <?import com.jfoenix.controls.*?>
-<?import java.lang.*?>
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
-<?import javafx.scene.image.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.shape.*?>
-<?import javafx.scene.text.*?>
-
-<!-- ********* Wrapper 1 ********* -->
-<Pane prefHeight="372.0" prefWidth="460.0" styleClass="wrapper"
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.text.Text?>
+<?import java.lang.*?>
+<Pane prefHeight="376.0" prefWidth="460.0" styleClass="wrapper" stylesheets="@Main.css"
       xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="cn.harryh.arkpets.controllers.ModelsModule">
-    <Label layoutX="10.0" layoutY="15.0" styleClass="config-group-title" text="模型选择"/>
-    <ImageView fx:id="selectedModelView" fitHeight="140.0" fitWidth="140.0" layoutX="15.0" layoutY="85.0"
-               pickOnBounds="true" preserveRatio="true"/>
-    <VBox layoutX="15.0" layoutY="200.0" prefHeight="140.0" prefWidth="140.0">
-        <Label fx:id="selectedModelName" styleClass="Info-primary" text="Name"/>
-        <Label fx:id="selectedModelAppellation" styleClass="Info-secondary" text="Appellation"/>
-        <Label fx:id="selectedModelSkinGroupName" styleClass="Info-secondary" text="SkinGroup"/>
-        <Label fx:id="selectedModelType" text="ModelType">
-            <styleClass>
-                <String fx:value="Info-tag"/>
-                <String fx:value="Info-tag-theme"/>
-            </styleClass>
-        </Label>
-    </VBox>
-    <HBox layoutX="10.0" layoutY="325.0" prefHeight="40.0" prefWidth="150.0">
-        <Label id="Info-filter-label" prefWidth="55.0" text="筛选" translateX="-10.0">
+
+    <HBox layoutX="15.0" layoutY="15.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="37.5" prefWidth="430.0"
+          spacing="5.5" styleClass="major-tool-bar-upper">
+        <JFXButton fx:id="searchModelReload" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
+                   prefHeight="28.0" prefWidth="60.0" text="重载">
             <graphic>
-                <AnchorPane prefHeight="10.0" prefWidth="0.0" translateX="5.0">
-                    <SVGPath content="M1 0h22l-9 15.094v8.906l-4-3v-5.906z" scaleX="0.5" scaleY="0.5"/>
+                <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
+                    <SVGPath
+                            content="M20.944 12.979c-.489 4.509-4.306 8.021-8.944 8.021-2.698 0-5.112-1.194-6.763-3.075l1.245-1.633c1.283 1.645 3.276 2.708 5.518 2.708 3.526 0 6.444-2.624 6.923-6.021h-2.923l4-5.25 4 5.25h-3.056zm-15.864-1.979c.487-3.387 3.4-6 6.92-6 2.237 0 4.228 1.059 5.51 2.698l1.244-1.632c-1.65-1.876-4.061-3.066-6.754-3.066-4.632 0-8.443 3.501-8.941 8h-3.059l4 5.25 4-5.25h-2.92z"
+                            scaleX="1.05" scaleY="1.05"/>
                 </AnchorPane>
             </graphic>
-        </Label>
-        <JFXComboBox id="Info-filter-box" fx:id="searchModelFilter" prefWidth="95.0"/>
-    </HBox>
-    <Pane id="Search-models-bar" layoutX="15.0" layoutY="40.0" prefHeight="38.0" prefWidth="430.0">
-        <JFXTextField id="Search-models-input" fx:id="searchModelInput" layoutX="70.0" layoutY="6.0" prefHeight="23.0"
-                      prefWidth="170.0"/>
-        <JFXButton fx:id="searchModelConfirm" layoutX="8.0" layoutY="5.0" maxHeight="-Infinity" maxWidth="-Infinity"
-                   minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="28.0" prefWidth="55.0"
-                   text="搜索">
-            <font>
-                <Font size="12.0"/>
-            </font>
+            <styleClass>
+                <String fx:value="btn-secondary"/>
+                <String fx:value="btn-with-icon"/>
+            </styleClass>
+        </JFXButton>
+        <JFXButton fx:id="searchModelRandom" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
+                   prefHeight="28.0" prefWidth="60.0" text="随机">
             <graphic>
                 <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
                     <SVGPath
-                            content="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z"/>
+                            content="M18 9v-3c-1 0-3.308-.188-4.506 2.216l-4.218 8.461c-1.015 2.036-3.094 3.323-5.37 3.323h-3.906v-2h3.906c1.517 0 2.903-.858 3.58-2.216l4.218-8.461c1.356-2.721 3.674-3.323 6.296-3.323v-3l6 4-6 4zm-9.463 1.324l1.117-2.242c-1.235-2.479-2.899-4.082-5.748-4.082h-3.906v2h3.906c2.872 0 3.644 2.343 4.631 4.324zm15.463 8.676l-6-4v3c-3.78 0-4.019-1.238-5.556-4.322l-1.118 2.241c1.021 2.049 2.1 4.081 6.674 4.081v3l6-4z"
+                            scaleX="0.95" scaleY="0.95"/>
                 </AnchorPane>
             </graphic>
             <styleClass>
-                <String fx:value="btn-primary"/>
+                <String fx:value="btn-secondary"/>
                 <String fx:value="btn-with-icon"/>
             </styleClass>
         </JFXButton>
-        <JFXButton fx:id="searchModelReset" layoutX="248.0" layoutY="5.0" maxHeight="-Infinity" maxWidth="-Infinity"
-                   minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="28.0" prefWidth="55.0"
-                   text="清空">
-            <font>
-                <Font size="12.0"/>
-            </font>
+        <JFXButton fx:id="searchModelReset" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
+                   prefHeight="28.0" prefWidth="28.0" styleClass="btn-iconified-secondary" text=" ">
+            <graphic>
+                <AnchorPane prefHeight="28.0" prefWidth="28.0" styleClass="btn-icon">
+                    <SVGPath
+                            content="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z"
+                            scaleX="1.05" scaleY="1.05" translateX="26.0"/>
+                </AnchorPane>
+            </graphic>
+        </JFXButton>
+        <JFXTextField id="Search-models-input" fx:id="searchModelInput" layoutX="70.0" layoutY="6.0" prefHeight="23.0"
+                      prefWidth="180.0">
+            <HBox.margin>
+                <Insets left="1.0"/>
+            </HBox.margin>
+        </JFXTextField>
+        <JFXButton fx:id="searchModelConfirm" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
+                   prefHeight="28.0" prefWidth="60.0" text="搜索">
             <graphic>
                 <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
                     <SVGPath
-                            content="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z"/>
+                            content="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z"/>
                 </AnchorPane>
             </graphic>
             <styleClass>
-                <String fx:value="btn-secondary"/>
+                <String fx:value="btn-primary"/>
                 <String fx:value="btn-with-icon"/>
             </styleClass>
         </JFXButton>
-        <JFXButton fx:id="searchModelRandom" layoutX="308.0" layoutY="5.0" maxHeight="-Infinity" maxWidth="-Infinity"
-                   minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="28.0" prefWidth="55.0"
-                   text="随机">
-            <font>
-                <Font size="12.0"/>
-            </font>
+    </HBox>
+    <HBox layoutX="15.0" layoutY="52.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="37.5" prefWidth="175.0"
+          spacing="5.5" styleClass="major-tool-bar-lower">
+        <JFXButton fx:id="toggleFilterPane" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
+                   prefHeight="28.0" prefWidth="60.0" text="筛选">
             <graphic>
                 <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
-                    <SVGPath
-                            content="M18 9v-3c-1 0-3.308-.188-4.506 2.216l-4.218 8.461c-1.015 2.036-3.094 3.323-5.37 3.323h-3.906v-2h3.906c1.517 0 2.903-.858 3.58-2.216l4.218-8.461c1.356-2.721 3.674-3.323 6.296-3.323v-3l6 4-6 4zm-9.463 1.324l1.117-2.242c-1.235-2.479-2.899-4.082-5.748-4.082h-3.906v2h3.906c2.872 0 3.644 2.343 4.631 4.324zm15.463 8.676l-6-4v3c-3.78 0-4.019-1.238-5.556-4.322l-1.118 2.241c1.021 2.049 2.1 4.081 6.674 4.081v3l6-4z"/>
+                    <SVGPath content="m1 0h22l-9 15.094v8.906l-4-3v-5.906z" scaleX="0.9" scaleY="0.9"/>
                 </AnchorPane>
             </graphic>
             <styleClass>
@@ -95,16 +92,13 @@
                 <String fx:value="btn-with-icon"/>
             </styleClass>
         </JFXButton>
-        <JFXButton fx:id="searchModelReload" layoutX="368.0" layoutY="5.0" maxHeight="-Infinity" maxWidth="-Infinity"
-                   minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="28.0" prefWidth="55.0"
-                   text="重载">
-            <font>
-                <Font size="12.0"/>
-            </font>
+        <JFXButton fx:id="toggleManagePane" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
+                   prefHeight="28.0" prefWidth="92.5" text="模型库管理">
             <graphic>
-                <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
+                <AnchorPane prefHeight="25.0" prefWidth="16.0" scaleX="0.0" styleClass="btn-icon">
                     <SVGPath
-                            content="M20.944 12.979c-.489 4.509-4.306 8.021-8.944 8.021-2.698 0-5.112-1.194-6.763-3.075l1.245-1.633c1.283 1.645 3.276 2.708 5.518 2.708 3.526 0 6.444-2.624 6.923-6.021h-2.923l4-5.25 4 5.25h-3.056zm-15.864-1.979c.487-3.387 3.4-6 6.92-6 2.237 0 4.228 1.059 5.51 2.698l1.244-1.632c-1.65-1.876-4.061-3.066-6.754-3.066-4.632 0-8.443 3.501-8.941 8h-3.059l4 5.25 4-5.25h-2.92z"/>
+                            content="m3.514 6.636c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508zm15.986 2.115v7.525l-6.75 3.722v-7.578zm-14.264-1.344 6.764-3.813 6.801 3.834-6.801 3.716z"
+                            scaleX="1.15" scaleY="1.15" AnchorPane.leftAnchor="-43.0"/>
                 </AnchorPane>
             </graphic>
             <styleClass>
@@ -112,11 +106,106 @@
                 <String fx:value="btn-with-icon"/>
             </styleClass>
         </JFXButton>
-    </Pane>
-    <JFXListView id="Search-models-list" fx:id="searchModelView" layoutX="165.0" layoutY="85.0" prefHeight="265.0"
-                 prefWidth="280.0"/>
-    <VBox id="Loading-failure-tip" fx:id="loadFailureTip" alignment="CENTER" layoutX="1.0" layoutY="85.0"
-          prefHeight="285.0" prefWidth="458.0" spacing="5.0" visible="false">
+    </HBox>
+
+    <fx:define>
+        <Double fx:id="_infoPaneX" fx:value="15.0"/>
+        <Double fx:id="_infoPaneY" fx:value="100.0"/>
+        <Double fx:id="_infoPaneH" fx:value="260.0"/>
+        <Double fx:id="_infoPaneW" fx:value="172.5"/>
+    </fx:define>
+    <AnchorPane fx:id="infoPane" layoutX="${_infoPaneX}" layoutY="${_infoPaneY}" prefHeight="${_infoPaneH}"
+                prefWidth="${_infoPaneW}"
+                styleClass="info-pane-light">
+        <VBox AnchorPane.topAnchor="0.0" prefWidth="${_infoPaneW}">
+            <Label fx:id="selectedModelType" text="ModelType" styleClass="info-type-badge"/>
+            <Label fx:id="selectedModelName" styleClass="info-primary" text="Name"/>
+            <Label fx:id="selectedModelAppellation" styleClass="info-secondary" text="Appellation"/>
+            <Label fx:id="selectedModelSkinGroupName" styleClass="info-secondary" text="SkinGroup"/>
+        </VBox>
+        <VBox AnchorPane.bottomAnchor="0.0" prefWidth="${_infoPaneW}">
+            <ScrollPane prefHeight="100.0" styleClass="flow-wrapper">
+                <FlowPane fx:id="infoPaneTagFlow" styleClass="tag-flow"/>
+            </ScrollPane>
+        </VBox>
+    </AnchorPane>
+    <AnchorPane fx:id="filterPane" layoutX="${_infoPaneX}" layoutY="${_infoPaneY}" prefHeight="${_infoPaneH}"
+                prefWidth="${_infoPaneW}"
+                styleClass="info-pane-light" visible="false">
+        <VBox AnchorPane.topAnchor="0.0" prefWidth="${_infoPaneW}">
+            <Label text="筛选" styleClass="info-type-badge"/>
+        </VBox>
+        <VBox AnchorPane.bottomAnchor="0.0" prefWidth="${_infoPaneW}">
+            <ScrollPane prefHeight="165.0" styleClass="flow-wrapper">
+                <FlowPane fx:id="filterPaneTagFlow" styleClass="tag-flow"/>
+            </ScrollPane>
+            <HBox spacing="8" alignment="CENTER_RIGHT">
+                <Label fx:id="filterPaneTagClear" styleClass="config-hyper-link" text="清除筛选"/>
+            </HBox>
+        </VBox>
+    </AnchorPane>
+    <AnchorPane fx:id="managePane" layoutX="${_infoPaneX}" layoutY="${_infoPaneY}" prefHeight="${_infoPaneH}"
+                prefWidth="${_infoPaneW}"
+                styleClass="info-pane-light" visible="false">
+        <VBox AnchorPane.topAnchor="0.0" prefWidth="${_infoPaneW}">
+            <Label text="模型" styleClass="info-type-badge"/>
+        </VBox>
+        <VBox AnchorPane.topAnchor="35.0" prefWidth="${_infoPaneW}">
+            <FlowPane prefHeight="180.0" styleClass="btn-flow">
+                <fx:define>
+                    <Double fx:id="_largeBtnW" fx:value="157.5"/>
+                    <Double fx:id="_smallBtnW" fx:value="77.5"/>
+                </fx:define>
+                <JFXButton fx:id="modelUpdate" minHeight="-Infinity" mnemonicParsing="false" prefWidth="${_largeBtnW}"
+                           text="检查更新">
+                    <graphic>
+                        <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
+                            <SVGPath
+                                    content="M15.408 21h-9.908c-3.037 0-5.5-2.463-5.5-5.5 0-2.702 1.951-4.945 4.521-5.408.212-3.951 3.473-7.092 7.479-7.092 3.267 0 6.037 2.089 7.063 5.003l-.063-.003c-.681 0-1.336.102-1.958.283-.878-2.025-2.73-3.283-5.042-3.283-3.359 0-5.734 2.562-5.567 6.78-1.954-.113-4.433.923-4.433 3.72 0 1.93 1.57 3.5 3.5 3.5h7.76c.566.81 1.3 1.49 2.148 2zm2.257-8.669c.402-.206.852-.331 1.335-.331 1.455 0 2.67 1.042 2.941 2.418l1.96-.398c-.456-2.291-2.475-4.02-4.901-4.02-.957 0-1.845.278-2.604.745l-1.396-1.745-1 5h5l-1.335-1.669zm5.335 8.669l-1.396-1.745c-.759.467-1.647.745-2.604.745-2.426 0-4.445-1.729-4.901-4.02l1.96-.398c.271 1.376 1.486 2.418 2.941 2.418.483 0 .933-.125 1.335-.331l-1.335-1.669h5l-1 5z"
+                                    translateX="-24.0" translateY="-3.0"/>
+                        </AnchorPane>
+                    </graphic>
+                    <styleClass>
+                        <String fx:value="btn-primary"/>
+                        <String fx:value="btn-with-icon"/>
+                    </styleClass>
+                </JFXButton>
+                <JFXButton fx:id="modelFetch" minHeight="-Infinity" mnemonicParsing="false" prefWidth="${_largeBtnW}"
+                           text="下载模型">
+                    <graphic>
+                        <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
+                            <SVGPath content="M16 11h5l-9 10-9-10h5v-11h8v11zm3 8v3h-14v-3h-2v5h18v-5h-2z"
+                                     translateX="-25.0"/>
+                        </AnchorPane>
+                    </graphic>
+                    <styleClass>
+                        <String fx:value="btn-primary"/>
+                        <String fx:value="btn-with-icon"/>
+                    </styleClass>
+                </JFXButton>
+                <JFXButton fx:id="modelVerify" minHeight="-Infinity" mnemonicParsing="false" prefWidth="${_smallBtnW}"
+                           styleClass="btn-secondary" text="验证模型"/>
+                <JFXButton fx:id="modelReFetch" minHeight="-Infinity" mnemonicParsing="false" prefWidth="${_smallBtnW}"
+                           styleClass="btn-secondary" text="重新下载"/>
+                <JFXButton fx:id="modelImport" minHeight="-Infinity" mnemonicParsing="false" prefWidth="${_smallBtnW}"
+                           styleClass="btn-secondary" text="导入压缩包"/>
+                <JFXButton fx:id="modelExport" minHeight="-Infinity" mnemonicParsing="false" prefWidth="${_smallBtnW}"
+                           styleClass="btn-secondary" text="导出压缩包"/>
+            </FlowPane>
+        </VBox>
+    </AnchorPane>
+
+    <fx:define>
+        <Double fx:id="_modelViewX" fx:value="195.0"/>
+        <Double fx:id="_modelViewW" fx:value="250.0"/>
+    </fx:define>
+    <Label id="Search-models-status" fx:id="searchModelStatus" alignment="CENTER_RIGHT" layoutX="${_modelViewX}"
+           layoutY="80.0" prefWidth="${_modelViewW}" textAlignment="RIGHT"/>
+    <JFXListView id="Search-models-list" fx:id="searchModelView" layoutX="${_modelViewX}" layoutY="100.0"
+                 prefHeight="260.0" prefWidth="${_modelViewW}"/>
+
+    <VBox id="Loading-failure-tip" fx:id="loadFailureTip" alignment="CENTER" layoutX="${_modelViewX}" layoutY="95.0"
+          prefHeight="270.0" prefWidth="${_modelViewW}" spacing="5.0" visible="false">
         <SVGPath
                 content="M11.5 23l-8.5-4.535v-3.953l5.4 3.122 3.1-3.406v8.772zm1-.001v-8.806l3.162 3.343 5.338-2.958v3.887l-8.5 4.534zm-10.339-10.125l-2.161-1.244 3-3.302-3-2.823 8.718-4.505 3.215 2.385 3.325-2.385 8.742 4.561-2.995 2.771 2.995 3.443-2.242 1.241v-.001l-5.903 3.27-3.348-3.541 7.416-3.962-7.922-4.372-7.923 4.372 7.422 3.937v.024l-3.297 3.622-5.203-3.008-.16-.092-.679-.393v.002z"
                 scaleX="1.5" scaleY="1.5" translateY="-10.0"/>
@@ -126,7 +215,7 @@
                 <Font size="16.0"/>
             </font>
         </Text>
-        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="使用前请先在 [选项] 中进行模型下载"/>
+        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="使用前请先在 [模型库管理] 中下载模型"/>
         <Text strokeType="OUTSIDE" strokeWidth="0.0" text="如您已下载模型，请尝试点击 [重载] 按钮"/>
     </VBox>
 </Pane>
diff --git a/assets/UI/RootModule.fxml b/assets/UI/RootModule.fxml
index 964dcd60..bfa7ac95 100644
--- a/assets/UI/RootModule.fxml
+++ b/assets/UI/RootModule.fxml
@@ -5,18 +5,16 @@
     At GPL-3.0 License
 -->
 
+<!-- ***** Root Node of ArkPets GUI Scene ***** -->
 <?import com.jfoenix.controls.*?>
-<?import java.lang.*?>
 <?import javafx.geometry.*?>
-<?import javafx.scene.effect.*?>
-<?import javafx.scene.image.*?>
+<?import javafx.scene.effect.DropShadow?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.*?>
-<?import javafx.scene.paint.*?>
+<?import javafx.scene.paint.Color?>
 <?import javafx.scene.shape.*?>
-<?import javafx.scene.text.*?>
-
-<!-- ***** Root Node of ArkPets GUI Scene ***** -->
-
+<?import javafx.scene.text.Text?>
 <StackPane fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="400.0" prefWidth="600.0" stylesheets="@Main.css" xmlns="http://javafx.com/javafx/17.0.2-ea"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="cn.harryh.arkpets.controllers.RootModule">
@@ -26,8 +24,8 @@
                 prefHeight="376.0" prefWidth="600.0" StackPane.alignment="BOTTOM_CENTER">
         <!-- ***** Sidebar: Provides module-switching and other often-used functions ***** -->
         <Pane id="Sidebar" fx:id="sidebar" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
-              minWidth="-Infinity" prefHeight="376.0" prefWidth="140.0" AnchorPane.leftAnchor="0.0"
-              AnchorPane.topAnchor="0.0" StackPane.alignment="TOP_LEFT">
+              minWidth="-Infinity" prefHeight="376.0" prefWidth="140.0" styleClass="shadowed"
+              AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" StackPane.alignment="TOP_LEFT">
             <Text id="Title" layoutX="12.0" layoutY="55.0" styleClass="fluorescent" text="ArkPets"
                   textAlignment="CENTER" wrappingWidth="117.0"/>
             <Line endX="128.0" layoutY="66.0" startX="12.0" stroke="#0000009e"/>
@@ -40,8 +38,8 @@
                     <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
                     <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
                 </rowConstraints>
-                <JFXButton fx:id="menuBtn1" mnemonicParsing="false" prefHeight="40.0" prefWidth="140.0" text="模型"
-                           textAlignment="CENTER">
+                <JFXButton fx:id="menuBtn1" mnemonicParsing="false" prefHeight="40.0" prefWidth="140.0"
+                           styleClass="menu-btn" text="模型" textAlignment="CENTER">
                     <GridPane.margin>
                         <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
                     </GridPane.margin>
@@ -52,13 +50,9 @@
                                     scaleX="0.95" scaleY="0.95" translateX="5.0"/>
                         </AnchorPane>
                     </graphic>
-                    <styleClass>
-                        <String fx:value="shadowed"/>
-                        <String fx:value="menu-btn"/>
-                    </styleClass>
                 </JFXButton>
-                <JFXButton fx:id="menuBtn2" mnemonicParsing="false" prefHeight="40.0" prefWidth="140.0" text="行为"
-                           textAlignment="CENTER" GridPane.rowIndex="1">
+                <JFXButton fx:id="menuBtn2" mnemonicParsing="false" prefHeight="40.0" prefWidth="140.0"
+                           styleClass="menu-btn" text="行为" textAlignment="CENTER" GridPane.rowIndex="1">
                     <GridPane.margin>
                         <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
                     </GridPane.margin>
@@ -69,13 +63,9 @@
                                     translateX="5.0"/>
                         </AnchorPane>
                     </graphic>
-                    <styleClass>
-                        <String fx:value="shadowed"/>
-                        <String fx:value="menu-btn"/>
-                    </styleClass>
                 </JFXButton>
-                <JFXButton fx:id="menuBtn3" mnemonicParsing="false" prefHeight="40.0" prefWidth="140.0" text="选项"
-                           textAlignment="CENTER" GridPane.rowIndex="2">
+                <JFXButton fx:id="menuBtn3" mnemonicParsing="false" prefHeight="40.0" prefWidth="140.0"
+                           styleClass="menu-btn" text="选项" textAlignment="CENTER" GridPane.rowIndex="2">
                     <GridPane.margin>
                         <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
                     </GridPane.margin>
@@ -86,10 +76,6 @@
                                     scaleX="0.8" scaleY="0.8" translateX="5.0"/>
                         </AnchorPane>
                     </graphic>
-                    <styleClass>
-                        <String fx:value="shadowed"/>
-                        <String fx:value="menu-btn"/>
-                    </styleClass>
                 </JFXButton>
             </GridPane>
             <JFXButton id="Start-btn" fx:id="launchBtn" layoutX="25.0" layoutY="310.0" mnemonicParsing="false"
@@ -146,14 +132,14 @@
 
     <AnchorPane id="Title-bar" fx:id="titleBar" maxHeight="-Infinity" minHeight="-Infinity"
                 onMouseDragged="#titleBarDragged" onMousePressed="#titleBarPressed" prefHeight="24.0"
-                StackPane.alignment="TOP_CENTER">
+                styleClass="shadowed" StackPane.alignment="TOP_CENTER">
         <HBox maxHeight="-Infinity" minHeight="-Infinity" prefHeight="24.0" prefWidth="200.0"
               AnchorPane.leftAnchor="3.0" AnchorPane.topAnchor="0.0">
-            <ImageView fitHeight="18.0" fitWidth="18.0" pickOnBounds="true" preserveRatio="true">
+            <ImageView cache="true" fitHeight="18.0" fitWidth="18.0" pickOnBounds="true">
                 <HBox.margin>
                     <Insets bottom="3.0" left="3.0" right="3.0" top="3.0"/>
                 </HBox.margin>
-                <Image url="@/icons/icon.png"/>
+                <Image url="@/icons/icon.png" requestedHeight="512.0" requestedWidth="512.0"/>
             </ImageView>
             <Text fx:id="titleText" strokeType="OUTSIDE" strokeWidth="0.0" text="ArkPets Launcher">
                 <HBox.margin>
diff --git a/assets/UI/SettingsModule.fxml b/assets/UI/SettingsModule.fxml
index 58e27117..b17ab9df 100644
--- a/assets/UI/SettingsModule.fxml
+++ b/assets/UI/SettingsModule.fxml
@@ -5,14 +5,11 @@
     At GPL-3.0 License
 -->
 
+<!-- ********* Wrapper 3 ********* -->
 <?import com.jfoenix.controls.*?>
-<?import java.lang.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
-<?import javafx.scene.shape.*?>
-
-<!-- ********* Wrapper 3 ********* -->
-<Pane prefHeight="372.0" prefWidth="460.0" styleClass="wrapper"
+<Pane prefHeight="376.0" prefWidth="460.0" styleClass="wrapper" stylesheets="@Main.css"
       xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="cn.harryh.arkpets.controllers.SettingsModule">
     <ScrollPane layoutX="10.0" layoutY="11.0" prefHeight="350.0" prefWidth="440.0" styleClass="scroll-v">
@@ -30,65 +27,6 @@
                     <JFXComboBox fx:id="configDisplayFps" prefWidth="100.0"/>
                 </HBox>
                 <Separator/>
-                <Label styleClass="config-group-title" text="模型下载"/>
-                <HBox spacing="12.5">
-                    <JFXButton fx:id="manageModelCheck" mnemonicParsing="false" prefHeight="35.0" prefWidth="82.0"
-                               text=" 检查更新">
-                        <graphic>
-                            <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
-                                <SVGPath
-                                        content="M14.601 21.5c0 1.38-1.116 2.5-2.499 2.5-1.378 0-2.499-1.12-2.499-2.5s1.121-2.5 2.499-2.5c1.383 0 2.499 1.119 2.499 2.5zm-2.42-21.5c-4.029 0-7.06 2.693-7.06 8h3.955c0-2.304.906-4.189 3.024-4.189 1.247 0 2.57.828 2.684 2.411.123 1.666-.767 2.511-1.892 3.582-2.924 2.78-2.816 4.049-2.816 7.196h3.943c0-1.452-.157-2.508 1.838-4.659 1.331-1.436 2.986-3.222 3.021-5.943.047-3.963-2.751-6.398-6.697-6.398z"
-                                        translateX="-22.0"/>
-                            </AnchorPane>
-                        </graphic>
-                        <styleClass>
-                            <String fx:value="btn-primary"/>
-                            <String fx:value="btn-with-icon"/>
-                        </styleClass>
-                    </JFXButton>
-                    <JFXButton fx:id="manageModelFetch" mnemonicParsing="false" prefHeight="35.0" prefWidth="82.0"
-                               text=" 全部下载">
-                        <graphic>
-                            <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
-                                <SVGPath content="M16 11h5l-9 10-9-10h5v-11h8v11zm3 8v3h-14v-3h-2v5h18v-5h-2z"
-                                         translateX="-22.0"/>
-                            </AnchorPane>
-                        </graphic>
-                        <styleClass>
-                            <String fx:value="btn-primary"/>
-                            <String fx:value="btn-with-icon"/>
-                        </styleClass>
-                    </JFXButton>
-                    <JFXButton fx:id="manageModelVerify" mnemonicParsing="false" prefHeight="35.0" prefWidth="102.0"
-                               text="  验证完整性">
-                        <graphic>
-                            <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
-                                <SVGPath
-                                        content="M21.856 10.303c.086.554.144 1.118.144 1.697 0 6.075-4.925 11-11 11s-11-4.925-11-11 4.925-11 11-11c2.347 0 4.518.741 6.304 1.993l-1.422 1.457c-1.408-.913-3.082-1.45-4.882-1.45-4.962 0-9 4.038-9 9s4.038 9 9 9c4.894 0 8.879-3.928 8.99-8.795l1.866-1.902zm-.952-8.136l-9.404 9.639-3.843-3.614-3.095 3.098 6.938 6.71 12.5-12.737-3.096-3.096z"
-                                        translateX="-33.0"/>
-                            </AnchorPane>
-                        </graphic>
-                        <styleClass>
-                            <String fx:value="btn-secondary"/>
-                            <String fx:value="btn-with-icon"/>
-                        </styleClass>
-                    </JFXButton>
-                    <JFXButton fx:id="manageModelImport" mnemonicParsing="false" prefHeight="35.0" prefWidth="102.0"
-                               text="  导入压缩包">
-                        <graphic>
-                            <AnchorPane prefHeight="25.0" prefWidth="16.0" styleClass="btn-icon">
-                                <SVGPath
-                                        content="M14 6h-3.999v-1h3.999v1zm0-2h-3.999v-1h3.999v1zm0 3h-3.999v1h3.999v-1zm0 2h-3.999v1h3.999v-1zm-1.999 11c-2.088 0-3.521-1.163-3.117-3.214.409-2.078 1.117-5.786 1.117-5.786h4s.729 3.792 1.117 5.786c.399 2.049-1.027 3.214-3.117 3.214zm1.924-2.495c0-1.724-3.852-1.685-3.852.003 0 1.627 3.852 1.639 3.852-.003zm5.075-15.505c1.654 0 3 1.346 3 3v14c0 1.654-1.346 3-3 3h-14c-1.654 0-3-1.346-3-3v-14c0-1.654 1.346-3 3-3h14zm0-2h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5z"
-                                        translateX="-33.0"/>
-                            </AnchorPane>
-                        </graphic>
-                        <styleClass>
-                            <String fx:value="btn-secondary"/>
-                            <String fx:value="btn-with-icon"/>
-                        </styleClass>
-                    </JFXButton>
-                </HBox>
-                <Separator/>
                 <Label styleClass="config-group-title" text="高级设置"/>
                 <HBox>
                     <JFXCheckBox fx:id="configAutoStartup" mnemonicParsing="false" text="开机自动生成桌宠"/>
@@ -107,7 +45,7 @@
                 <Label styleClass="config-group-title" text="关于软件"/>
                 <HBox spacing="22.5">
                     <Label fx:id="aboutQueryUpdate" styleClass="config-hyper-link" text="检查软件更新"/>
-                    <Label fx:id="aboutVisitWebsite" styleClass="config-hyper-link" text="ArkPets官网"/>
+                    <Label fx:id="aboutVisitWebsite" styleClass="config-hyper-link" text="ArkPets 官网"/>
                 </HBox>
                 <HBox spacing="22.5">
                     <Label fx:id="aboutReadme" styleClass="config-hyper-link" text="使用指南"/>
diff --git a/core/src/cn/harryh/arkpets/Const.java b/core/src/cn/harryh/arkpets/Const.java
index 60f70483..3e8e5fa2 100644
--- a/core/src/cn/harryh/arkpets/Const.java
+++ b/core/src/cn/harryh/arkpets/Const.java
@@ -22,8 +22,8 @@ public final class Const {
 
     // App name
     public static final String appName      = "ArkPets";
-    public static final String coreTitle    = "ArkPets Core";
-    public static final String desktopTitle = "ArkPets Launcher " + appVersion;
+    public static final String coreTitle    = appName + " Core";
+    public static final String desktopTitle = appName + " Launcher " + appVersion;
 
     // IO presets
     public static final int zipBufferSizeDefault      = 8 * 1024;
@@ -87,10 +87,11 @@ public static class PathConfig {
         public static final String urlModelsZip     = "isHarryh/Ark-Models/archive/refs/heads/main.zip";
         public static final String urlModelsData    = "isHarryh/Ark-Models/main/models_data.json";
         public static final String tempDirPath      = "temp/";
+        public static final String fileModelsZipName            = "ArkModels";
+        public static final String fileModelsDataPath           = "models_data.json";
         public static final String tempModelsUnzipDirPath       = tempDirPath + "models_unzipped/";
-        public static final String tempModelsZipCachePath       = tempDirPath + "ArkModels.zip";
+        public static final String tempModelsZipCachePath       = tempDirPath + fileModelsZipName + ".zip";
         public static final String tempQueryVersionCachePath    = tempDirPath + "ApiQueryVersionCache";
-        public static final String fileModelsDataPath           = "models_data.json";
     }
 
 
diff --git a/core/src/cn/harryh/arkpets/utils/IOUtils.java b/core/src/cn/harryh/arkpets/utils/IOUtils.java
index 98376600..56e6f55b 100644
--- a/core/src/cn/harryh/arkpets/utils/IOUtils.java
+++ b/core/src/cn/harryh/arkpets/utils/IOUtils.java
@@ -12,8 +12,10 @@
 import java.security.MessageDigest;
 import java.security.NoSuchAlgorithmException;
 import java.util.Enumeration;
+import java.util.Map;
 import java.util.zip.ZipEntry;
 import java.util.zip.ZipFile;
+import java.util.zip.ZipOutputStream;
 
 import static cn.harryh.arkpets.Const.zipBufferSizeDefault;
 
@@ -121,17 +123,17 @@ public static String getMD5(File file)
         }
 
         /** Deletes a file or a directory.
-         * @param path The path instance of the specified file or directory.
+         * @param fileOrDir The file instance of the specified file or directory.
          * @param ignoreError If true, exceptions will be ignored.
          * @throws IOException If I/O error occurs.
          */
-        public static void delete(Path path, boolean ignoreError)
+        public static void delete(File fileOrDir, boolean ignoreError)
                 throws IOException {
-            if (!path.toFile().exists())
+            if (!fileOrDir.exists())
                 return;
-            if (path.toFile().isFile()) {
+            if (fileOrDir.isFile()) {
                 try {
-                    Files.delete(path);
+                    Files.delete(fileOrDir.toPath());
                 } catch (IOException e) {
                     if (!ignoreError)
                         throw e;
@@ -139,7 +141,7 @@ public static void delete(Path path, boolean ignoreError)
                 return;
             }
             try {
-                Files.walkFileTree(path, new SimpleFileVisitor<>() {
+                Files.walkFileTree(fileOrDir.toPath(), new SimpleFileVisitor<>() {
                     @Override
                     public FileVisitResult visitFile(Path file, BasicFileAttributes attrs) throws IOException {
                         try {
@@ -167,6 +169,16 @@ public FileVisitResult postVisitDirectory(Path dir, IOException exc) throws IOEx
                     throw e;
             }
         }
+
+        /** Deletes a file or a directory.
+         * @param path The path instance of the specified file or directory.
+         * @param ignoreError If true, exceptions will be ignored.
+         * @throws IOException If I/O error occurs.
+         */
+        public static void delete(Path path, boolean ignoreError)
+                throws IOException {
+            FileUtil.delete(path.toFile(), ignoreError);
+        }
     }
 
 
@@ -186,7 +198,7 @@ public static void unzip(String zipFilePath, String destDirPath, boolean overwri
             ZipFile zipfile = new ZipFile(zipFilePath);
             File destDir = new File(destDirPath);
 
-            if (overwrite && destDir.exists())
+            if (overwrite)
                 FileUtil.delete(destDir.toPath(), true);
             if (!destDir.exists())
                 Files.createDirectories(destDir.toPath());
@@ -223,5 +235,57 @@ public static void unzip(String zipFilePath, String destDirPath, boolean overwri
                 }
             }
         }
+
+        /** Zips some files or directories into a zip file.
+         * Note that {@code UTF-8} encoding and {@code DEFAULT_COMPRESSION} level will be used to create the zip file.
+         * @param zipFilePath The path of the zip file.
+         * @param contents The map whose keys are the source paths and whose values are the zipped paths.
+         * @param overwrite If true, the existed zip file will be deleted before zipping.
+         * @throws IOException If I/O error occurs.
+         */
+        public static void zip(String zipFilePath, Map<String, String> contents, boolean overwrite)
+                throws IOException {
+            if (contents.isEmpty())
+                return;
+            if (overwrite)
+                FileUtil.delete(new File(zipFilePath), false);
+
+            try (ZipOutputStream zos = new ZipOutputStream(new FileOutputStream(zipFilePath))) {
+                IOException[] error = new IOException[]{null};
+                for (String sourcePath : contents.keySet()) {
+                    File sourceFile = new File(sourcePath);
+                    String zippedPath = contents.get(sourcePath).replaceAll("(^/+)|(/+$)", "");
+                    if (sourceFile.isDirectory()) {
+                        //noinspection resource
+                        Files.walk(sourceFile.toPath())
+                                .filter(path -> !Files.isDirectory(path))
+                                .forEach(path -> {
+                                    try {
+                                        String relativePath = path.toString().substring(sourcePath.length() + 1);
+                                        copyFileToZip(zos, path.toFile(), zippedPath + "/" + relativePath);
+                                    } catch (IOException e) {
+                                        error[0] = e;
+                                    }
+                                });
+                        if (error[0] != null)
+                            throw error[0];
+                    } else if (sourceFile.isFile()) {
+                        copyFileToZip(zos, new File(sourcePath), zippedPath);
+                    }
+                }
+            }
+        }
+
+        private static void copyFileToZip(ZipOutputStream zos, File sourceFile, String zippedPath)
+                throws IOException {
+            zos.putNextEntry(new ZipEntry(zippedPath));
+            int len;
+            byte[] bytes = new byte[zipBufferSizeDefault];
+            try (BufferedInputStream bis = new BufferedInputStream(new FileInputStream(sourceFile))) {
+                while ((len = bis.read(bytes, 0, zipBufferSizeDefault)) != -1)
+                    zos.write(bytes, 0, len);
+            }
+            zos.closeEntry();
+        }
     }
 }
diff --git a/desktop/src/cn/harryh/arkpets/ArkHomeFX.java b/desktop/src/cn/harryh/arkpets/ArkHomeFX.java
index 3cf16b62..28ad04e1 100644
--- a/desktop/src/cn/harryh/arkpets/ArkHomeFX.java
+++ b/desktop/src/cn/harryh/arkpets/ArkHomeFX.java
@@ -111,8 +111,9 @@ public void start(Stage stage) throws Exception {
             }
 
             // Post initialization.
-            syncRemoteMetaInfo();
-            switchToModelsPane();
+            rootModule.syncRemoteMetaInfo();
+            rootModule.moduleWrapperComposer.activate(0);
+
             Logger.info("Launcher", "Finished starting");
         }, Duration.ZERO, durationFast);
     }
@@ -124,31 +125,7 @@ public void stop() throws Exception {
         ProcessPool.getInstance().shutdown();
     }
 
-    public boolean initModelsDataset(boolean popNotice) {
-        return modelsModule.initModelsDataset(popNotice);
-    }
-
     public void popLoading(EventHandler<ActionEvent> handler) {
         rootModule.popLoading(handler);
     }
-
-    public void modelReload(boolean popNotice) {
-        modelsModule.modelReload(popNotice);
-    }
-
-    public void switchToModelsPane() {
-        rootModule.menuBtn1.getOnAction().handle(new ActionEvent());
-    }
-
-    public void switchToBehaviorPane() {
-        rootModule.menuBtn2.getOnAction().handle(new ActionEvent());
-    }
-
-    public void switchToSettingsPane() {
-        rootModule.menuBtn3.getOnAction().handle(new ActionEvent());
-    }
-
-    public void syncRemoteMetaInfo() {
-        rootModule.syncRemoteMetaInfo();
-    }
 }
diff --git a/desktop/src/cn/harryh/arkpets/controllers/BehaviorModule.java b/desktop/src/cn/harryh/arkpets/controllers/BehaviorModule.java
index c5154c8f..8c097aab 100644
--- a/desktop/src/cn/harryh/arkpets/controllers/BehaviorModule.java
+++ b/desktop/src/cn/harryh/arkpets/controllers/BehaviorModule.java
@@ -181,7 +181,7 @@ private void initConfigBehavior() {
         };
         configPhysicRestore.setOnMouseClicked(e -> {
             configPhysicRestoreEvent.handle(e);
-            app.switchToBehaviorPane();
+            app.rootModule.moduleWrapperComposer.activate(1);
         });
         if (app.config.isAllPhysicConfigZeroed())
             configPhysicRestoreEvent.handle(null);
diff --git a/desktop/src/cn/harryh/arkpets/controllers/ModelsModule.java b/desktop/src/cn/harryh/arkpets/controllers/ModelsModule.java
index 8241e25b..f8bc0e8d 100644
--- a/desktop/src/cn/harryh/arkpets/controllers/ModelsModule.java
+++ b/desktop/src/cn/harryh/arkpets/controllers/ModelsModule.java
@@ -7,30 +7,40 @@
 import cn.harryh.arkpets.assets.AssetItem;
 import cn.harryh.arkpets.assets.AssetItemGroup;
 import cn.harryh.arkpets.assets.ModelsDataset;
+import cn.harryh.arkpets.guitasks.*;
 import cn.harryh.arkpets.utils.GuiPrefabs;
 import cn.harryh.arkpets.utils.IOUtils;
 import cn.harryh.arkpets.utils.Logger;
 import cn.harryh.arkpets.utils.Version;
 import com.alibaba.fastjson.JSONObject;
 import com.jfoenix.controls.*;
-import javafx.beans.value.ChangeListener;
+import javafx.collections.FXCollections;
 import javafx.collections.ListChangeListener;
+import javafx.collections.ObservableSet;
+import javafx.collections.SetChangeListener;
+import javafx.event.ActionEvent;
+import javafx.event.EventHandler;
 import javafx.fxml.FXML;
 import javafx.scene.Group;
+import javafx.scene.Node;
 import javafx.scene.control.*;
-import javafx.scene.image.ImageView;
 import javafx.scene.input.KeyCode;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.FlowPane;
 import javafx.scene.layout.Pane;
+import javafx.stage.FileChooser;
 
 import java.io.File;
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import java.util.ArrayList;
-import java.util.Set;
+import java.util.HashMap;
 import java.util.function.Consumer;
 import java.util.function.Predicate;
 
 import static cn.harryh.arkpets.Const.*;
+import static cn.harryh.arkpets.Const.PathConfig.fileModelsDataPath;
+import static cn.harryh.arkpets.Const.PathConfig.fileModelsZipName;
 import static cn.harryh.arkpets.utils.GuiPrefabs.tooltipStyle;
 
 
@@ -48,9 +58,9 @@ public final class ModelsModule implements Controller<ArkHomeFX> {
     @FXML
     private JFXTextField searchModelInput;
     @FXML
-    private JFXListView<JFXListCell<AssetItem>> searchModelView;
+    private Label searchModelStatus;
     @FXML
-    private JFXComboBox<String> searchModelFilter;
+    private JFXListView<JFXListCell<AssetItem>> searchModelView;
     @FXML
     private Label selectedModelName;
     @FXML
@@ -59,20 +69,68 @@ public final class ModelsModule implements Controller<ArkHomeFX> {
     private Label selectedModelSkinGroupName;
     @FXML
     private Label selectedModelType;
+
+    @FXML
+    private AnchorPane infoPane;
+    @FXML
+    private AnchorPane filterPane;
+    @FXML
+    private AnchorPane managePane;
+    @FXML
+    private JFXButton toggleFilterPane;
+    @FXML
+    private JFXButton toggleManagePane;
+    @FXML
+    private FlowPane infoPaneTagFlow;
+    @FXML
+    public Label filterPaneTagClear;
+    @FXML
+    private FlowPane filterPaneTagFlow;
+
+    @FXML
+    private JFXButton modelUpdate;
     @FXML
-    private ImageView selectedModelView;
+    private JFXButton modelFetch;
+    @FXML
+    private JFXButton modelVerify;
+    @FXML
+    private JFXButton modelReFetch;
+    @FXML
+    private JFXButton modelImport;
+    @FXML
+    private JFXButton modelExport;
 
     private AssetItemGroup assetItemList;
     private JFXListCell<AssetItem> selectedModelCell;
     private ArrayList<JFXListCell<AssetItem>> modelCellList = new ArrayList<>();
+    private ObservableSet<String> filterTagSet = FXCollections.observableSet();
+    private GuiPrefabs.PeerNodeComposer infoPaneComposer;
+    private GuiPrefabs.PeerNodeComposer mngBtnComposer;
 
     private ArkHomeFX app;
 
     @Override
     public void initializeWith(ArkHomeFX app) {
         this.app = app;
-        modelReload(false);
+        infoPaneComposer = new GuiPrefabs.PeerNodeComposer();
+        infoPaneComposer.add(0, infoPane);
+        infoPaneComposer.add(1,
+                e -> GuiPrefabs.replaceStyleClass(toggleFilterPane, "btn-secondary", "btn-primary"),
+                e -> GuiPrefabs.replaceStyleClass(toggleFilterPane, "btn-primary", "btn-secondary"),
+                filterPane);
+        infoPaneComposer.add(2,
+                e -> GuiPrefabs.replaceStyleClass(toggleManagePane, "btn-secondary", "btn-primary"),
+                e -> GuiPrefabs.replaceStyleClass(toggleManagePane, "btn-primary", "btn-secondary"),
+                managePane);
+        mngBtnComposer = new GuiPrefabs.PeerNodeComposer();
+        mngBtnComposer.add(0, modelFetch);
+        mngBtnComposer.add(1, modelUpdate, modelReFetch, modelVerify, modelExport);
+
+        initInfoPane();
         initModelSearch();
+        initModelFilter();
+        initModelManage();
+        modelReload(false);
     }
 
     public boolean initModelsDataset(boolean doPopNotice) {
@@ -97,6 +155,8 @@ public boolean initModelsDataset(boolean doPopNotice) {
                 } catch (Exception ex) {
                     Logger.warn("ModelManager", "Failed to get the compatibility of the model database.");
                 }
+                if (mngBtnComposer.getActivatedId() != 1)
+                    mngBtnComposer.activate(1);
                 Logger.debug("ModelManager", "Initialized model dataset successfully.");
                 return true;
             } catch (Exception e) {
@@ -109,36 +169,34 @@ public boolean initModelsDataset(boolean doPopNotice) {
         } catch (FileNotFoundException e) {
             Logger.warn("ModelManager", "Failed to initialize model dataset due to file not found. (" + e.getMessage() + ")");
             if (doPopNotice) {
-                JFXDialog dialog = GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "模型载入失败", "模型未成功载入：未找到数据集。",
+                JFXDialog dialog = GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "模型载入失败", "模型未成功载入：未找到数据集。",
                         "模型数据集文件 " + PathConfig.fileModelsDataPath + " 可能不在工作目录下。\n请先前往 [选项] 进行模型下载。", null);
-                JFXButton go2 = GuiPrefabs.DialogUtil.getGotoButton(dialog, app.root);
-                go2.setOnAction(ev -> {
-                    app.switchToSettingsPane();
-                    GuiPrefabs.DialogUtil.disposeDialog(dialog, app.root);
-                });
-                GuiPrefabs.DialogUtil.attachAction(dialog, go2, 0);
                 dialog.show();
             }
         } catch (ModelsDataset.DatasetKeyException e) {
             Logger.warn("ModelManager", "Failed to initialize model dataset due to dataset parsing error. (" + e.getMessage() + ")");
             if (doPopNotice)
-                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "模型载入失败", "模型未成功载入：数据集解析失败。",
+                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "模型载入失败", "模型未成功载入：数据集解析失败。",
                         "模型数据集可能不完整，或无法被启动器正确识别。请尝试更新模型或更新软件。", null).show();
         } catch (IOException e) {
             Logger.error("ModelManager", "Failed to initialize model dataset due to unknown reasons, details see below.", e);
             if (doPopNotice)
-                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "模型载入失败", "模型未成功载入：发生意外错误。",
+                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "模型载入失败", "模型未成功载入：发生意外错误。",
                         "失败原因概要：" + e.getLocalizedMessage(), null).show();
         }
+        if (mngBtnComposer.getActivatedId() != 0)
+            mngBtnComposer.activate(0);
         return false;
     }
 
     private void initModelAssets(boolean doPopNotice) {
-        if (!app.initModelsDataset(doPopNotice))
+        modelCellList = new ArrayList<>();
+        assetItemList = new AssetItemGroup();
+        if (!initModelsDataset(doPopNotice))
             return;
         try {
             // Find every model assets.
-            assetItemList = app.modelsDataset.data.filter(AssetItem::isExisted);
+            assetItemList.addAll(app.modelsDataset.data.filter(AssetItem::isExisted));
             if (assetItemList.isEmpty())
                 throw new IOException("Found no assets in the target directories.");
             // Initialize list view:
@@ -149,29 +207,21 @@ private void initModelAssets(boolean doPopNotice) {
             );
             searchModelView.setFixedCellSize(30);
             // Write models to menu items.
-            modelCellList = new ArrayList<>();
             assetItemList.forEach(assetItem -> modelCellList.add(getMenuItem(assetItem, searchModelView)));
             Logger.debug("ModelManager", "Initialized model assets successfully.");
         } catch (IOException e) {
             // Explicitly set all lists to empty.
-            assetItemList = new AssetItemGroup();
-            modelCellList = new ArrayList<>();
             Logger.error("ModelManager", "Failed to initialize model assets due to unknown reasons, details see below.", e);
             if (doPopNotice)
-                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "模型载入失败", "模型未成功载入：读取模型列表失败。",
+                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "模型载入失败", "模型未成功载入：读取模型列表失败。",
                         "失败原因概要：" + e.getLocalizedMessage(), null).show();
         }
     }
 
-    private final ChangeListener<String> filterListener = (observable, oldValue, newValue) -> {
-        if (searchModelFilter.getValue() != null) {
-            app.popLoading(e -> {
-                Logger.info("ModelManager", "Filter \"" + searchModelFilter.getValue() + "\"");
-                modelSearch(searchModelInput.getText());
-                searchModelFilter.getSelectionModel().clearAndSelect(searchModelFilter.getSelectionModel().getSelectedIndex());
-            });
-        }
-    };
+    private void initInfoPane() {
+        toggleFilterPane.setOnAction(e -> infoPaneComposer.toggle(1, 0));
+        toggleManagePane.setOnAction(e -> infoPaneComposer.toggle(2, 0));
+    }
 
     private void initModelSearch() {
         searchModelInput.setPromptText("输入关键字");
@@ -185,37 +235,128 @@ private void initModelSearch() {
         searchModelReset.setOnAction(e -> app.popLoading(ev -> {
             searchModelInput.setText("");
             searchModelInput.requestFocus();
-            searchModelFilter.getSelectionModel().select(0);
+            filterTagSet.clear();
             modelSearch("");
+            infoPaneComposer.activate(0);
         }));
 
         searchModelRandom.setOnAction(e -> modelRandom());
 
         searchModelReload.setOnAction(e -> modelReload(true));
+    }
 
-        searchModelFilter.valueProperty().removeListener(filterListener);
-        searchModelFilter.getItems().setAll("全部");
-        searchModelFilter.getSelectionModel().select(0);
-        if (assertModelLoaded(false)) {
-            Set<String> filterTags = app.modelsDataset.sortTags.keySet();
-            for (String s : filterTags)
-                searchModelFilter.getItems().add(app.modelsDataset.sortTags.get(s));
-        }
-        searchModelFilter.valueProperty().addListener(filterListener);
+    private void initModelFilter() {
+        filterPaneTagClear.setOnMouseClicked(e -> app.popLoading(ev -> {
+            filterTagSet.clear();
+            modelSearch(searchModelInput.getText());
+            infoPaneComposer.activate(0);
+        }));
+    }
+
+    private void initModelManage() {
+        EventHandler<ActionEvent> modelFetchEventHandler = e -> {
+            /* Foreground fetch models */
+            // Go to [Step 1/3]:
+            new DownloadModelsTask(app.root, GuiTask.GuiTaskStyle.COMMON) {
+                @Override
+                protected void onSucceeded(boolean result){
+                    // Go to [Step 2/3]:
+                    new UnzipModelsTask(root, GuiTaskStyle.STRICT, PathConfig.tempModelsZipCachePath) {
+                        @Override
+                        protected void onSucceeded(boolean result) {
+                            // Go to [Step 3/3]:
+                            new PostUnzipModelTask(root, GuiTaskStyle.STRICT) {
+                                @Override
+                                protected void onSucceeded(boolean result) {
+                                    try {
+                                        IOUtils.FileUtil.delete(new File(PathConfig.tempModelsZipCachePath).toPath(), false);
+                                    } catch (IOException ex) {
+                                        Logger.warn("Task", "The zip file cannot be deleted, because " + ex.getMessage());
+                                    }
+                                    app.modelsModule.modelReload(true);
+                                }
+                            }.start();
+                        }
+                    }.start();
+                }
+            }.start();
+        };
+
+        modelUpdate.setOnAction(e -> {
+            /* Foreground check models update */
+            if (!app.modelsModule.initModelsDataset(true))
+                return;
+            new CheckModelUpdateTask(app.root, GuiTask.GuiTaskStyle.COMMON).start();
+        });
+
+        modelFetch.setOnAction(modelFetchEventHandler);
+        modelReFetch.setOnAction(modelFetchEventHandler);
+
+        modelVerify.setOnAction(e -> {
+            /* Foreground verify models */
+            if (!app.modelsModule.initModelsDataset(true))
+                return;
+            new VerifyModelsTask(app.root, GuiTask.GuiTaskStyle.COMMON, app.modelsDataset).start();
+        });
+
+        modelImport.setOnAction(e -> {
+            // Initialize the file chooser
+            Logger.info("ModelManager", "Opening file chooser to import zip file");
+            FileChooser fileChooser = new FileChooser();
+            FileChooser.ExtensionFilter extensionFilter1 = new FileChooser.ExtensionFilter("All Files", "*.*");
+            FileChooser.ExtensionFilter extensionFilter2 = new FileChooser.ExtensionFilter("Archives", "*.zip");
+            fileChooser.getExtensionFilters().addAll(extensionFilter1, extensionFilter2);
+            fileChooser.setSelectedExtensionFilter(extensionFilter2);
+            // Handle the chosen file
+            File zipFile = fileChooser.showOpenDialog(app.root.getScene().getWindow());
+            if (zipFile != null && zipFile.isFile()) {
+                Logger.info("ModelManager", "Importing zip file: " + zipFile);
+                // Go to [Step 1/2]:
+                new UnzipModelsTask(app.root, GuiTask.GuiTaskStyle.STRICT, zipFile.getPath()) {
+                    @Override
+                    protected void onSucceeded(boolean result) {
+                        // Go to [Step 2/2]:
+                        new PostUnzipModelTask(root, GuiTaskStyle.STRICT) {
+                            @Override
+                            protected void onSucceeded(boolean result) {
+                                app.modelsModule.modelReload(true);
+                            }
+                        }.start();
+                    }
+                }.start();
+            }
+        });
+
+        modelExport.setOnAction(e -> {
+            // Initialize the file chooser
+            Logger.info("ModelManager", "Opening file chooser to export zip file");
+            FileChooser fileChooser = new FileChooser();
+            fileChooser.getExtensionFilters().add(new FileChooser.ExtensionFilter("Archives", "*.zip"));
+            fileChooser.setInitialFileName(fileModelsZipName + ".zip");
+            // Handle the chosen file
+            File zipFile = fileChooser.showSaveDialog(app.root.getScene().getWindow());
+            if (zipFile != null) {
+                Logger.info("ModelManager", "Exporting zip file: " + zipFile);
+                HashMap<String, String> contents = new java.util.HashMap<>();
+                contents.put(fileModelsDataPath, fileModelsZipName + "/" + fileModelsDataPath);
+                for (File dir : app.modelsDataset.storageDirectory.values())
+                    contents.put(dir.toString(), fileModelsZipName + "/" + dir);
+                new ZipTask(app.root, GuiTask.GuiTaskStyle.STRICT, zipFile.toString(), contents).start();
+            }
+        });
     }
 
     public void modelSearch(String keyWords) {
         searchModelView.getItems().clear();
+        searchModelStatus.setText("");
         if (assertModelLoaded(false)) {
-            // Handle tag
-            String filterTag = "";
-            for (String s : app.modelsDataset.sortTags.keySet())
-                if (searchModelFilter.getValue().equals(app.modelsDataset.sortTags.get(s)))
-                    filterTag = s;
             // Filter and search assets
-            AssetItemGroup filtered = filterTag.isEmpty() ? assetItemList :
-                    assetItemList.filter(AssetItem.PropertyExtractor.ASSET_ITEM_SORT_TAGS, Set.of(filterTag));
+            int rawSize = assetItemList.size();
+            AssetItemGroup filtered = filterTagSet.isEmpty() ? assetItemList :
+                    assetItemList.filter(AssetItem.PropertyExtractor.ASSET_ITEM_SORT_TAGS, filterTagSet);
             AssetItemGroup searched = filtered.searchByKeyWords(keyWords);
+            int curSize = searched.size();
+            searchModelStatus.setText((rawSize == curSize ? rawSize : curSize + " / " + rawSize) + " 个模型");
             // Add cells
             for (JFXListCell<AssetItem> cell : modelCellList)
                 if (searched.contains(cell.getItem()))
@@ -236,10 +377,13 @@ public void modelRandom() {
 
     public void modelReload(boolean doPopNotice) {
         app.popLoading(e -> {
+            Logger.info("ModelManager", "Reloading");
             initModelAssets(doPopNotice);
             initModelSearch();
             modelSearch("");
-            if (!modelCellList.isEmpty() && app.config.character_asset != null && !app.config.character_asset.isEmpty()) {
+            // Select recent model
+            if (assetItemList != null && !modelCellList.isEmpty() &&
+                    app.config.character_asset != null && !app.config.character_asset.isEmpty()) {
                 // Scroll to recent selected model
                 AssetItem recentSelected = assetItemList.searchByRelPath(app.config.character_asset);
                 if (recentSelected != null)
@@ -249,19 +393,47 @@ public void modelReload(boolean doPopNotice) {
                             searchModelView.getSelectionModel().select(cell);
                         }
             }
+            // Setup filter pane
+            filterTagSet = FXCollections.observableSet();
+            filterTagSet.addListener((SetChangeListener<String>)change -> {
+                Logger.debug("ModelManager", "Filter tag " + change);
+                if (change.getElementAdded() == null && change.getElementRemoved() == null)
+                    return;
+                String s = change.getElementAdded() == null ? change.getElementRemoved() : change.getElementAdded();
+                String t = app.modelsDataset.sortTags == null ? s : app.modelsDataset.sortTags.getOrDefault(s, s);
+                for (Node node : filterPaneTagFlow.getChildren())
+                    if (node instanceof JFXButton tag && t.equals(tag.getText())) {
+                        String styleFrom = change.getElementAdded() == null ? "info-tag-badge-active" : "info-tag-badge";
+                        String styleTo = change.getElementAdded() == null ? "info-tag-badge" : "info-tag-badge-active";
+                        GuiPrefabs.replaceStyleClass(tag, styleFrom, styleTo);
+                    }
+            });
+            filterPaneTagFlow.getChildren().clear();
+            if (assetItemList != null && app.modelsDataset != null) {
+                assetItemList.extract(AssetItem.PropertyExtractor.ASSET_ITEM_SORT_TAGS).forEach(s -> {
+                    String t = app.modelsDataset.sortTags == null ? s : app.modelsDataset.sortTags.getOrDefault(s, s);
+                    JFXButton tag = new JFXButton(t);
+                    tag.getStyleClass().add("info-tag-badge");
+                    tag.setOnAction(ev -> {
+                        if (filterTagSet.contains(s))
+                            filterTagSet.remove(s);
+                        else
+                            filterTagSet.add(s);
+                        modelSearch(searchModelInput.getText());
+                    });
+                    filterPaneTagFlow.getChildren().add(tag);
+                });
+            }
+            // Finish reload
             loadFailureTip.setVisible(modelCellList.isEmpty());
-            app.rootModule.launchBtn.setDisable(true);
-            Button startBtn = (Button)app.root.lookup("#Start-btn");
-            startBtn.setDisable(modelCellList.isEmpty());
+            app.rootModule.launchBtn.setDisable(modelCellList.isEmpty());
             System.gc();
             Logger.info("ModelManager", "Reloaded");
         });
     }
 
     private JFXListCell<AssetItem> getMenuItem(AssetItem assetItem, JFXListView<JFXListCell<AssetItem>> container) {
-        double width = container.getPrefWidth();
-        width -= container.getPadding().getLeft() + container.getPadding().getRight();
-        width *= 0.75;
+        double width = container.getPrefWidth() - 50;
         double height = 30;
         double divide = 0.618;
         JFXListCell<AssetItem> item = new JFXListCell<>();
@@ -305,6 +477,24 @@ private void selectModel(AssetItem asset, JFXListCell<AssetItem> item) {
         selectedModelAppellation.setTooltip(selectedModelAppellationTip);
         selectedModelSkinGroupName.setTooltip(selectedModelSkinGroupNameTip);
         selectedModelType.setTooltip(selectedModelTypeTip);
+        // Setup tag flow pane
+        infoPaneTagFlow.getChildren().clear();
+        asset.sortTags.forEach(o -> {
+            String s = o.toString();
+            String t = app.modelsDataset.sortTags == null ? s : app.modelsDataset.sortTags.getOrDefault(s, s);
+            JFXButton tag = new JFXButton(t);
+            tag.getStyleClass().add("info-tag-badge-active");
+            tag.setOnAction(e -> {
+                filterTagSet.clear();
+                filterTagSet.add(s);
+                infoPaneComposer.activate(1);
+                modelSearch(searchModelInput.getText());
+            });
+            infoPaneTagFlow.getChildren().add(tag);
+        });
+        // Switch info pane
+        if (infoPaneComposer.getActivatedId() != 0)
+            infoPaneComposer.activate(0);
         // Apply to app.config, but not to save
         app.config.character_asset = asset.getLocation();
         app.config.character_files = asset.assetList;
@@ -315,7 +505,7 @@ private boolean assertModelLoaded(boolean doPopNotice) {
         if (app.modelsDataset == null) {
             // Not loaded:
             if (doPopNotice)
-                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "未能加载模型", "请确保模型加载成功后再进行此操作。",
+                GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "未能加载模型", "请确保模型加载成功后再进行此操作。",
                         "请先在[选项]中进行模型下载。\n如您已下载模型，请尝试点击[重载]按钮。", null).show();
             return false;
         } else {
diff --git a/desktop/src/cn/harryh/arkpets/controllers/RootModule.java b/desktop/src/cn/harryh/arkpets/controllers/RootModule.java
index acc764c3..75c992a7 100644
--- a/desktop/src/cn/harryh/arkpets/controllers/RootModule.java
+++ b/desktop/src/cn/harryh/arkpets/controllers/RootModule.java
@@ -28,18 +28,22 @@
 import javafx.scene.text.Text;
 import javafx.util.Duration;
 
-import java.util.*;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Objects;
 import java.util.concurrent.ExecutionException;
 import java.util.concurrent.Future;
 
 import static cn.harryh.arkpets.Const.*;
+import static cn.harryh.arkpets.utils.GuiComponents.Handbook;
 import static cn.harryh.arkpets.utils.GuiPrefabs.DialogUtil;
-import static cn.harryh.arkpets.utils.GuiPrefabs.Handbook;
 
 
 public final class RootModule implements Controller<ArkHomeFX> {
     public Handbook trayExitHandbook = new TrayExitHandBook();
-    public JavaProcess.UnexpectedExitCodeException lastLaunchFailed = null;
+    public JavaProcess.UnexpectedExitCodeException lastLaunchFailed;
+    public GuiPrefabs.PeerNodeComposer moduleWrapperComposer;
 
     @FXML
     private StackPane root;
@@ -61,11 +65,11 @@ public final class RootModule implements Controller<ArkHomeFX> {
     @FXML
     private Pane sidebar;
     @FXML
-    public JFXButton menuBtn1;
+    private JFXButton menuBtn1;
     @FXML
-    public JFXButton menuBtn2;
+    private JFXButton menuBtn2;
     @FXML
-    public JFXButton menuBtn3;
+    private JFXButton menuBtn3;
     @FXML
     public JFXButton launchBtn;
 
@@ -95,6 +99,11 @@ public void initializeWith(ArkHomeFX app) {
         app.config.saveConfig();
     }
 
+    /** Pops up the splash screen in the GUI.
+     * @param handler The event to be handled when the splash screen is shown.
+     * @param durationIn The fade-in transition duration.
+     * @param durationOut The fade-out transition duration.
+     */
     public void popSplashScreen(EventHandler<ActionEvent> handler, Duration durationIn, Duration durationOut) {
         body.setVisible(false);
         GuiPrefabs.fadeInNode(splashScreen, durationIn, e -> {
@@ -136,8 +145,8 @@ protected Boolean call() throws InterruptedException, ExecutionException {
                 args.remove(LogConfig.debugArg);
                 String temp = switch (app.config.logging_level) {
                     case LogConfig.error -> LogConfig.errorArg;
-                    case LogConfig.warn -> LogConfig.warnArg;
-                    case LogConfig.info -> LogConfig.infoArg;
+                    case LogConfig.warn  -> LogConfig.warnArg;
+                    case LogConfig.info  -> LogConfig.infoArg;
                     case LogConfig.debug -> LogConfig.debugArg;
                     default -> "";
                 };
@@ -198,6 +207,7 @@ private void initLaunchButton() {
         // Set handler for internal start button.
         launchBtn.setOnAction(e -> {
             // When request to launch ArkPets:
+            launchBtn.setDisable(true);
             app.config.saveConfig();
             if (app.config.character_asset != null && !app.config.character_asset.isEmpty()) {
                 app.popLoading(ev -> {
@@ -208,11 +218,13 @@ private void initLaunchButton() {
                         Thread.sleep(1200);
                         // Show handbook in the first-run.
                         if (isNewcomer && !trayExitHandbook.hasShown()) {
-                            GuiPrefabs.Handbook b = trayExitHandbook;
+                            Handbook b = trayExitHandbook;
                             GuiPrefabs.DialogUtil.createCommonDialog(app.root, b.getIcon(), b.getTitle(), b.getHeader(), b.getContent(), null).show();
                             b.setShown();
                         }
                     } catch (InterruptedException ignored) {
+                    } finally {
+                        launchBtn.setDisable(false);
                     }
                 });
             }
@@ -221,30 +233,20 @@ private void initLaunchButton() {
 
     private void initMenuButtons() {
         // Bind the menu buttons to the corresponding modules' wrappers.
-        Map<Button, AnchorPane> btnMap = Map.of(menuBtn1, wrapper1, menuBtn2, wrapper2, menuBtn3, wrapper3);
-        btnMap.forEach((btn, wrapper) -> {
-            btn.getStyleClass().setAll("menu-btn");
-            btn.setOnAction(e -> {
-                switchModule(btnMap.get(btn));
-                // Restore all button's style.
-                btnMap.keySet().forEach(btn0 -> btn0.getStyleClass().setAll("menu-btn"));
-                // Set this active button's style.
-                btn.getStyleClass().add("menu-btn-active");
-            });
-        });
-    }
-
-    private void switchModule(Pane activeWrapper) {
-        List<Pane> wrapperList = List.of(wrapper1, wrapper2, wrapper3);
-        wrapperList.forEach(wrapper -> {
-            if (wrapper.equals(activeWrapper)) {
-                // Show this active wrapper.
-                GuiPrefabs.fadeInNode(wrapper, durationNormal, null);
-            } else {
-                // Hide other wrappers.
-                wrapper.setVisible(false);
-            }
-        });
+        moduleWrapperComposer = new GuiPrefabs.PeerNodeComposer();
+        Button[] menuBtnList = new Button[]{menuBtn1, menuBtn2, menuBtn3};
+        AnchorPane[] wrapperList = new AnchorPane[]{wrapper1, wrapper2, wrapper3};
+        for (int i = 0; i < 3; i++) {
+            // i = {0=Models, 1=Behavior, 2=Settings}
+            final int finalI = i;
+            menuBtnList[i].setOnAction(e -> moduleWrapperComposer.activate(finalI));
+            menuBtnList[i].getStyleClass().setAll("menu-btn");
+            moduleWrapperComposer.add(i,
+                    e -> menuBtnList[finalI].getStyleClass().add("menu-btn-active"),
+                    e -> menuBtnList[finalI].getStyleClass().setAll("menu-btn"),
+                    wrapperList[i]
+            );
+        }
     }
 
     private void initLaunchingStatusListener() {
diff --git a/desktop/src/cn/harryh/arkpets/controllers/SettingsModule.java b/desktop/src/cn/harryh/arkpets/controllers/SettingsModule.java
index 5842aed8..2222800b 100644
--- a/desktop/src/cn/harryh/arkpets/controllers/SettingsModule.java
+++ b/desktop/src/cn/harryh/arkpets/controllers/SettingsModule.java
@@ -6,7 +6,8 @@
 import cn.harryh.arkpets.ArkConfig;
 import cn.harryh.arkpets.ArkHomeFX;
 import cn.harryh.arkpets.Const;
-import cn.harryh.arkpets.guitasks.*;
+import cn.harryh.arkpets.guitasks.CheckAppUpdateTask;
+import cn.harryh.arkpets.guitasks.GuiTask;
 import cn.harryh.arkpets.utils.*;
 import com.jfoenix.controls.*;
 import javafx.concurrent.ScheduledService;
@@ -15,7 +16,6 @@
 import javafx.scene.control.*;
 import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.Pane;
-import javafx.stage.FileChooser;
 import javafx.util.Duration;
 import org.apache.log4j.Level;
 
@@ -35,14 +35,6 @@ public final class SettingsModule implements Controller<ArkHomeFX> {
     @FXML
     private JFXComboBox<Integer> configDisplayFps;
     @FXML
-    private JFXButton manageModelCheck;
-    @FXML
-    private JFXButton manageModelFetch;
-    @FXML
-    private JFXButton manageModelVerify;
-    @FXML
-    private JFXButton manageModelImport;
-    @FXML
     private JFXComboBox<String> configLoggingLevel;
     @FXML
     private Label exploreLogDir;
@@ -71,7 +63,6 @@ public final class SettingsModule implements Controller<ArkHomeFX> {
     public void initializeWith(ArkHomeFX app) {
         this.app = app;
         initConfigDisplay();
-        initModelManage();
         initConfigAdvanced();
         initAbout();
         initNoticeBox();
@@ -97,76 +88,6 @@ private void initConfigDisplay() {
         });
     }
 
-    private void initModelManage() {
-        manageModelCheck.setOnAction(e -> {
-            if (!app.initModelsDataset(true))
-                return;
-            new CheckModelUpdateTask(app.root, GuiTask.GuiTaskStyle.COMMON).start();
-        });
-        manageModelFetch.setOnAction(e -> {
-            /* Foreground fetch models */
-            // Go to [Step 1/3]:
-            new DownloadModelsTask(app.root, GuiTask.GuiTaskStyle.COMMON) {
-                @Override
-                protected void onSucceeded(boolean result){
-                    // Go to [Step 2/3]:
-                    new UnzipModelsTask(root, GuiTaskStyle.STRICT, PathConfig.tempModelsZipCachePath) {
-                        @Override
-                        protected void onSucceeded(boolean result) {
-                            // Go to [Step 3/3]:
-                            new PostUnzipModelTask(root, GuiTaskStyle.STRICT) {
-                                @Override
-                                protected void onSucceeded(boolean result) {
-                                    try {
-                                        IOUtils.FileUtil.delete(new File(PathConfig.tempModelsZipCachePath).toPath(), false);
-                                    } catch (IOException ex) {
-                                        Logger.warn("Task", "The zip file cannot be deleted, because " + ex.getMessage());
-                                    }
-                                    app.modelReload(true);
-                                    app.switchToModelsPane();
-                                }
-                            }.start();
-                        }
-                    }.start();
-                }
-            }.start();
-        });
-        manageModelVerify.setOnAction(e -> {
-            /* Foreground verify models */
-            if (!app.initModelsDataset(true))
-                return;
-            new VerifyModelsTask(app.root, GuiTask.GuiTaskStyle.COMMON, app.modelsDataset).start();
-        });
-        manageModelImport.setOnAction(e -> {
-            // Initialize the file chooser
-            Logger.info("ModelManager", "Opening file chooser to import zip file");
-            FileChooser fileChooser = new FileChooser();
-            FileChooser.ExtensionFilter extensionFilter1 = new FileChooser.ExtensionFilter("All Files", "*.*");
-            FileChooser.ExtensionFilter extensionFilter2 = new FileChooser.ExtensionFilter("Archives", "*.zip");
-            fileChooser.getExtensionFilters().addAll(extensionFilter1, extensionFilter2);
-            fileChooser.setSelectedExtensionFilter(extensionFilter2);
-            // Handle the chosen file
-            File zipFile = fileChooser.showOpenDialog(app.root.getScene().getWindow());
-            if (zipFile != null && zipFile.isFile()) {
-                Logger.info("ModelManager", "Importing zip file: " + zipFile);
-                // Go to [Step 1/2]:
-                new UnzipModelsTask(app.root, GuiTask.GuiTaskStyle.STRICT, zipFile.getPath()) {
-                    @Override
-                    protected void onSucceeded(boolean result) {
-                        // Go to [Step 2/2]:
-                        new PostUnzipModelTask(root, GuiTaskStyle.STRICT) {
-                            @Override
-                            protected void onSucceeded(boolean result) {
-                                app.modelReload(true);
-                                app.switchToModelsPane();
-                            }
-                        }.start();
-                    }
-                }.start();
-            }
-        });
-    }
-
     private void initConfigAdvanced() {
         configLoggingLevel.getItems().setAll(Const.LogConfig.debug, Const.LogConfig.info, Const.LogConfig.warn, Const.LogConfig.error);
         configLoggingLevel.valueProperty().addListener(observable -> {
@@ -202,7 +123,7 @@ else if (args.contains(Const.LogConfig.debugArg))
         configNetworkAgent.textProperty().addListener((observable, oldValue, newValue) -> {
             if (newValue.isEmpty()) {
                 configNetworkAgentStatus.setText("未使用代理");
-                configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.COLOR_LIGHT_GRAY);
+                configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.Colors.COLOR_LIGHT_GRAY);
                 Logger.info("Network", "Set proxy to none");
                 System.setProperty("http.proxyHost", "");
                 System.setProperty("http.proxyPort", "");
@@ -216,29 +137,29 @@ else if (args.contains(Const.LogConfig.debugArg))
                     System.setProperty("https.proxyHost", ipPort[0]);
                     System.setProperty("https.proxyPort", ipPort[1]);
                     configNetworkAgentStatus.setText("代理生效中");
-                    configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.COLOR_SUCCESS);
+                    configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.Colors.COLOR_SUCCESS);
                     Logger.info("Network", "Set proxy to host " + ipPort[0] + ", port " + ipPort[1]);
                 } else {
                     configNetworkAgentStatus.setText("输入不合法");
-                    configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.COLOR_DANGER);
+                    configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.Colors.COLOR_DANGER);
                 }
             }
         });
         configNetworkAgentStatus.setText("未使用代理");
-        configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.COLOR_LIGHT_GRAY);
+        configNetworkAgentStatus.setStyle("-fx-text-fill:" + GuiPrefabs.Colors.COLOR_LIGHT_GRAY);
 
         configAutoStartup.setSelected(ArkConfig.StartupConfig.isSetStartup());
         configAutoStartup.setOnAction(e -> {
             if (configAutoStartup.isSelected()) {
                 if (ArkConfig.StartupConfig.addStartup()) {
-                    GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_SUCCESS_ALT, GuiPrefabs.COLOR_SUCCESS), "开机自启动", "开机自启动设置成功。",
+                    GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_SUCCESS_ALT, GuiPrefabs.Colors.COLOR_SUCCESS), "开机自启动", "开机自启动设置成功。",
                             "下次开机时将会自动生成您最后一次启动的桌宠。", null).show();
                 } else {
                     if (ArkConfig.StartupConfig.generateScript() == null)
-                        GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "开机自启动", "开机自启动设置失败。",
+                        GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "开机自启动", "开机自启动设置失败。",
                                 "无法确认目标程序的位置，其原因和相关解决方案如下：", "为确保自启动服务的稳定性，直接打开的ArkPets的\".jar\"版启动器，是不支持配置自启动的。请使用exe版的安装包安装ArkPets后运行，或使用zip版的压缩包解压程序文件后运行。另外，当您使用错误的工作目录运行启动器时也可能出现此情况。").show();
                     else
-                        GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING), "开机自启动", "开机自启动设置失败。",
+                        GuiPrefabs.DialogUtil.createCommonDialog(app.root, GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING), "开机自启动", "开机自启动设置失败。",
                                 "无法写入系统的启动目录，其原因可参见日志文件。", "这有可能是由于权限不足导致的。请尝试关闭反病毒软件，并以管理员权限运行启动器。").show();
                     configAutoStartup.setSelected(false);
                 }
@@ -267,12 +188,12 @@ protected boolean getActivated() {
 
             @Override
             protected String getColorString() {
-                return GuiPrefabs.COLOR_INFO;
+                return GuiPrefabs.Colors.COLOR_INFO;
             }
 
             @Override
             protected String getIconSVGPath() {
-                return GuiPrefabs.IconUtil.ICON_UPDATE;
+                return GuiPrefabs.Icons.ICON_UPDATE;
             }
 
             @Override
@@ -294,12 +215,12 @@ protected boolean getActivated() {
 
             @Override
             protected String getColorString() {
-                return GuiPrefabs.COLOR_WARNING;
+                return GuiPrefabs.Colors.COLOR_WARNING;
             }
 
             @Override
             protected String getIconSVGPath() {
-                return GuiPrefabs.IconUtil.ICON_WARNING_ALT;
+                return GuiPrefabs.Icons.ICON_WARNING_ALT;
             }
 
             @Override
@@ -315,12 +236,12 @@ protected boolean getActivated() {
 
             @Override
             protected String getColorString() {
-                return GuiPrefabs.COLOR_WARNING;
+                return GuiPrefabs.Colors.COLOR_WARNING;
             }
 
             @Override
             protected String getIconSVGPath() {
-                return GuiPrefabs.IconUtil.ICON_WARNING_ALT;
+                return GuiPrefabs.Icons.ICON_WARNING_ALT;
             }
 
             @Override
diff --git a/desktop/src/cn/harryh/arkpets/guitasks/CheckAppUpdateTask.java b/desktop/src/cn/harryh/arkpets/guitasks/CheckAppUpdateTask.java
index e7cae370..39f5435c 100644
--- a/desktop/src/cn/harryh/arkpets/guitasks/CheckAppUpdateTask.java
+++ b/desktop/src/cn/harryh/arkpets/guitasks/CheckAppUpdateTask.java
@@ -4,7 +4,10 @@
 package cn.harryh.arkpets.guitasks;
 
 import cn.harryh.arkpets.Const;
-import cn.harryh.arkpets.utils.*;
+import cn.harryh.arkpets.utils.GuiPrefabs;
+import cn.harryh.arkpets.utils.IOUtils;
+import cn.harryh.arkpets.utils.Logger;
+import cn.harryh.arkpets.utils.Version;
 import com.alibaba.fastjson.JSONObject;
 import javafx.scene.layout.StackPane;
 
@@ -53,7 +56,7 @@ protected void onSucceeded(boolean result) {
                     Const.isUpdateAvailable = true;
                     if (style != GuiTaskStyle.HIDDEN)
                         GuiPrefabs.DialogUtil.createCommonDialog(root,
-                                GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_INFO_ALT, GuiPrefabs.COLOR_INFO),
+                                GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_INFO_ALT, GuiPrefabs.Colors.COLOR_INFO),
                                 "检查软件更新",
                                 "检测到软件有新的版本！",
                                 "当前版本 " + appVersion + " 可更新到 " + stableVersion + "\n请访问ArkPets官网或GitHub下载新的安装包。",
@@ -63,7 +66,7 @@ protected void onSucceeded(boolean result) {
                     Const.isUpdateAvailable = false;
                     if (style != GuiTaskStyle.HIDDEN)
                         GuiPrefabs.DialogUtil.createCommonDialog(root,
-                                GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_SUCCESS_ALT, GuiPrefabs.COLOR_SUCCESS),
+                                GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_SUCCESS_ALT, GuiPrefabs.Colors.COLOR_SUCCESS),
                                 "检查软件更新",
                                 "尚未发现新的正式版本。",
                                 "当前版本 " + appVersion + " 已是最新",
@@ -75,7 +78,7 @@ protected void onSucceeded(boolean result) {
                 Logger.warn("Checker", "Application version check failed (api failed)");
                 if (style != GuiTaskStyle.HIDDEN)
                     GuiPrefabs.DialogUtil.createCommonDialog(root,
-                            GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_DANGER_ALT, GuiPrefabs.COLOR_DANGER),
+                            GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_DANGER_ALT, GuiPrefabs.Colors.COLOR_DANGER),
                             "检查软件更新",
                             "服务器返回了无效的消息。",
                             "可能是兼容性问题或服务器不可用。\n您可以访问ArkPets官网或GitHub仓库以查看是否有新版本。",
diff --git a/desktop/src/cn/harryh/arkpets/guitasks/CheckModelUpdateTask.java b/desktop/src/cn/harryh/arkpets/guitasks/CheckModelUpdateTask.java
index c580b7e9..87c1f6f8 100644
--- a/desktop/src/cn/harryh/arkpets/guitasks/CheckModelUpdateTask.java
+++ b/desktop/src/cn/harryh/arkpets/guitasks/CheckModelUpdateTask.java
@@ -56,7 +56,7 @@ protected void onSucceeded(boolean result) {
                 Logger.error("Checker", "Unable to parse remote model repo version, details see below.", e);
                 GuiPrefabs.DialogUtil.createCommonDialog(
                         root,
-                        GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING),
+                        GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING),
                         "检查模型更新",
                         "无法判断模型仓库版本。",
                         "因发生错误，无法解析远程模型仓库的版本。",
@@ -70,10 +70,11 @@ protected void onSucceeded(boolean result) {
                 Logger.info("Checker", "Model repo version check finished (up-to-dated)");
                 GuiPrefabs.DialogUtil.createCommonDialog(
                         root,
-                        GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_SUCCESS_ALT, GuiPrefabs.COLOR_SUCCESS),
-                        "检查模型更新", "当前模型版本与远程仓库一致。",
-                        "无需进行模型仓库更新。",
-                        "提示：远程模型仓库的版本不一定和游戏官方是同步更新的。\n模型仓库版本描述：\n" + versionDescription).show();
+                        GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_SUCCESS_ALT, GuiPrefabs.Colors.COLOR_SUCCESS),
+                        "检查模型更新",
+                        "无需进行模型库更新。",
+                        "本地模型库的版本与远程模型库的一致。",
+                        "提示：远程模型库的版本不一定和游戏官方同步更新。\n模型库版本描述：\n" + versionDescription).show();
             } else {
                 // If the result of comparison is "not the same"
                 String oldVersionDescription;
@@ -87,18 +88,19 @@ protected void onSucceeded(boolean result) {
                     Logger.error("Checker", "Unable to parse local model repo version, details see below.", e);
                     GuiPrefabs.DialogUtil.createCommonDialog(
                             root,
-                            GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, GuiPrefabs.COLOR_WARNING),
+                            GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_WARNING_ALT, GuiPrefabs.Colors.COLOR_WARNING),
                             "检查模型更新",
-                            "无法判断模型仓库版本。",
-                            "因发生错误，无法解析本地模型仓库的版本。",
+                            "无法判断模型库版本。",
+                            "因发生错误，无法解析本地模型库的版本。",
                             null).show();
                 }
                 GuiPrefabs.DialogUtil.createCommonDialog(
                         root,
-                        GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_INFO_ALT, GuiPrefabs.COLOR_INFO),
-                        "检查模型更新", "本地模型版本与远程仓库有差异。",
-                        "可以重新下载模型，即可更新模型版本。",
-                        "远程模型仓库版本描述：\n" + versionDescription + "\n\n本地模型仓库版本描述：\n" + oldVersionDescription).show();
+                        GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_INFO_ALT, GuiPrefabs.Colors.COLOR_INFO),
+                        "检查模型更新",
+                        "模型库似乎有更新！",
+                        "您可以 [重新下载] 模型，以更新模型库版本。",
+                        "远程模型库版本描述：\n" + versionDescription + "\n\n本地模型库版本描述：\n" + oldVersionDescription).show();
                 Logger.info("Checker", "Model repo version check finished (not up-to-dated)");
             }
         } catch (IOException e) {
diff --git a/desktop/src/cn/harryh/arkpets/guitasks/VerifyModelsTask.java b/desktop/src/cn/harryh/arkpets/guitasks/VerifyModelsTask.java
index 77d0287d..223ddc3f 100644
--- a/desktop/src/cn/harryh/arkpets/guitasks/VerifyModelsTask.java
+++ b/desktop/src/cn/harryh/arkpets/guitasks/VerifyModelsTask.java
@@ -12,8 +12,8 @@
 import javafx.scene.Node;
 import javafx.scene.layout.StackPane;
 
-import static cn.harryh.arkpets.utils.GuiPrefabs.COLOR_SUCCESS;
-import static cn.harryh.arkpets.utils.GuiPrefabs.COLOR_WARNING;
+import static cn.harryh.arkpets.utils.GuiPrefabs.Colors;
+import static cn.harryh.arkpets.utils.GuiPrefabs.Icons;
 
 
 public class VerifyModelsTask extends GuiTask {
@@ -57,13 +57,13 @@ protected Boolean call() {
                         if (!item.isExisted()) {
                             // Dir missing:
                             Logger.info("Checker", "Model repo check finished (dir not integral)");
-                            dialogGraphic[0] = GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, COLOR_WARNING);
+                            dialogGraphic[0] = Icons.getIcon(Icons.ICON_WARNING_ALT, Colors.COLOR_WARNING);
                             dialogHeader[0] = "已发现问题，模型资源可能不完整";
                             dialogContent[0] = "资源 " + item.assetDir + " 不存在。重新下载模型文件可能解决此问题。";
                         } else {
                             // Dir existing but file missing
                             Logger.info("Checker", "Model repo check finished (file not integral)");
-                            dialogGraphic[0] = GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_WARNING_ALT, COLOR_WARNING);
+                            dialogGraphic[0] = Icons.getIcon(Icons.ICON_WARNING_ALT, Colors.COLOR_WARNING);
                             dialogHeader[0] = "已发现问题，模型资源可能不完整";
                             dialogContent[0] = "资源 " + item.assetDir + " 缺少部分文件。重新下载模型文件可能解决此问题。";
                         }
@@ -74,7 +74,7 @@ protected Boolean call() {
 
                 if (!flag) {
                     Logger.info("Checker", "Model repo check finished (okay)");
-                    dialogGraphic[0] = GuiPrefabs.IconUtil.getIcon(GuiPrefabs.IconUtil.ICON_SUCCESS_ALT, COLOR_SUCCESS);
+                    dialogGraphic[0] = Icons.getIcon(Icons.ICON_SUCCESS_ALT, Colors.COLOR_SUCCESS);
                     dialogHeader[0] = "模型资源是完整的。";
                     dialogContent[0] = "这只能说明本地的模型资源是完整的，但不一定是最新的。";
                 }
diff --git a/desktop/src/cn/harryh/arkpets/guitasks/ZipTask.java b/desktop/src/cn/harryh/arkpets/guitasks/ZipTask.java
new file mode 100644
index 00000000..81ab34ef
--- /dev/null
+++ b/desktop/src/cn/harryh/arkpets/guitasks/ZipTask.java
@@ -0,0 +1,55 @@
+/** Copyright (c) 2022-2024, Harry Huang
+ * At GPL-3.0 License
+ */
+package cn.harryh.arkpets.guitasks;
+
+import cn.harryh.arkpets.utils.GuiPrefabs;
+import cn.harryh.arkpets.utils.IOUtils;
+import cn.harryh.arkpets.utils.Logger;
+import javafx.concurrent.Task;
+import javafx.scene.layout.StackPane;
+
+import java.io.File;
+import java.util.Map;
+
+
+public class ZipTask extends GuiTask {
+    protected final String zipPath;
+    protected final Map<String, String> contents;
+
+    public ZipTask(StackPane root, GuiTaskStyle style, String zipPath, Map<String, String> contents) {
+        super(root, style);
+        this.zipPath = zipPath;
+        this.contents = contents;
+    }
+
+    @Override
+    protected String getHeader() {
+        return "正在创建压缩文件...";
+    }
+
+    @Override
+    protected String getInitialContent() {
+        return "这可能需要一些时间";
+    }
+
+    @Override
+    protected Task<Boolean> getTask() {
+        return new Task<>() {
+            @Override
+            protected Boolean call() throws Exception {
+                Logger.info("Zip", "Zipping " + contents.size() + " entries into " + zipPath);
+                IOUtils.FileUtil.delete(new File(zipPath), false);
+                IOUtils.ZipUtil.zip(zipPath, contents, false);
+                Logger.info("Zip", "Zipped into " + zipPath + " , finished");
+                return this.isDone() && !this.isCancelled();
+            }
+        };
+    }
+
+    @Override
+    protected void onFailed(Throwable e) {
+        if (style != GuiTaskStyle.HIDDEN)
+            GuiPrefabs.DialogUtil.createErrorDialog(root, e).show();
+    }
+}
diff --git a/desktop/src/cn/harryh/arkpets/utils/GuiComponents.java b/desktop/src/cn/harryh/arkpets/utils/GuiComponents.java
index 67cd7900..dcbf661d 100644
--- a/desktop/src/cn/harryh/arkpets/utils/GuiComponents.java
+++ b/desktop/src/cn/harryh/arkpets/utils/GuiComponents.java
@@ -22,97 +22,6 @@
 
 
 public class GuiComponents {
-    abstract public static class NoticeBar {
-        protected static final double borderRadius = 8;
-        protected static final double internalSpacing = 8;
-        protected static final double iconScale = 0.75;
-        protected static final double margin = 4;
-        protected static final double widthScale = 0.9;
-        protected final Pane container;
-        protected Pane noticeBar;
-
-        public NoticeBar(Pane root) {
-            container = root;
-        }
-
-        public final void refresh() {
-            if (getActivated() && noticeBar == null) {
-                noticeBar = getNoticeBar(getWidth(), getHeight());
-                container.getChildren().add(noticeBar);
-                ScaleTransition transition = new ScaleTransition(Const.durationFast, noticeBar);
-                transition.setFromY(0.1);
-                transition.setToY(1);
-                transition.play();
-            } else if (!getActivated() && noticeBar != null) {
-                final Pane finalNoticeBar = noticeBar;
-                noticeBar = null;
-                ScaleTransition transition = new ScaleTransition(Const.durationFast, finalNoticeBar);
-                transition.setFromY(1);
-                transition.setToY(0.1);
-                transition.setOnFinished(e -> container.getChildren().remove(finalNoticeBar));
-                transition.play();
-            }
-        }
-
-        abstract protected boolean getActivated();
-
-        abstract protected String getColorString();
-
-        abstract protected String getIconSVGPath();
-
-        abstract protected String getText();
-
-        protected double getHeight() {
-            return Font.getDefault().getSize() * 3;
-        }
-
-        protected double getWidth() {
-            Region region = (Region)container.getParent();
-            double regionWidth = region.getWidth() - region.getInsets().getLeft() - region.getInsets().getRight();
-            return regionWidth * widthScale;
-        }
-
-        protected Pane getNoticeBar(double width, double height) {
-            // Colors
-            Color color = Color.valueOf(getColorString());
-            BackgroundFill bgFill = new BackgroundFill(
-                    color.deriveColor(0, 0.62, 1.62, 0.38),
-                    new CornerRadii(borderRadius),
-                    new Insets(margin)
-            );
-            // Layouts
-            HBox bar = new HBox(internalSpacing);
-            bar.setBackground(new Background(bgFill));
-            bar.setMaxSize(width, height);
-            bar.setAlignment(Pos.CENTER_LEFT);
-            SVGPath icon = new SVGPath();
-            icon.setContent(getIconSVGPath());
-            icon.setFill(color);
-            icon.setScaleX(iconScale);
-            icon.setScaleY(iconScale);
-            icon.setTranslateX(margin);
-            Label label = new Label(getText());
-            label.setTextFill(color);
-            label.setMinWidth(width * widthScale * widthScale);
-            bar.getChildren().addAll(icon, label);
-            // Click event
-            try {
-                Method onClick = getClass().getDeclaredMethod("onClick", MouseEvent.class);
-                if (!NoticeBar.class.equals(onClick.getDeclaringClass())) {
-                    // If the method "onClick" has been overridden:
-                    bar.setCursor(Cursor.HAND);
-                    bar.setOnMouseClicked(this::onClick);
-                }
-            } catch (Exception ignored) {
-            }
-            return bar;
-        }
-
-        protected void onClick(MouseEvent event) {
-        }
-    }
-
-
     @SuppressWarnings("UnusedReturnValue")
     abstract public static class SliderSetup<N extends Number> {
         protected final Slider slider;
@@ -226,4 +135,121 @@ protected Integer adjustValue(double rawValue) {
             return Math.toIntExact(Math.round(Math.round(rawValue / commonMultiple) * commonMultiple));
         }
     }
+
+
+    abstract public static class NoticeBar {
+        protected static final double borderRadius = 8;
+        protected static final double internalSpacing = 8;
+        protected static final double iconScale = 0.75;
+        protected static final double margin = 4;
+        protected static final double widthScale = 0.9;
+        protected final Pane container;
+        protected Pane noticeBar;
+
+        public NoticeBar(Pane root) {
+            container = root;
+        }
+
+        public final void refresh() {
+            if (getActivated() && noticeBar == null) {
+                noticeBar = getNoticeBar(getWidth(), getHeight());
+                container.getChildren().add(noticeBar);
+                ScaleTransition transition = new ScaleTransition(Const.durationFast, noticeBar);
+                transition.setFromY(0.1);
+                transition.setToY(1);
+                transition.play();
+            } else if (!getActivated() && noticeBar != null) {
+                final Pane finalNoticeBar = noticeBar;
+                noticeBar = null;
+                ScaleTransition transition = new ScaleTransition(Const.durationFast, finalNoticeBar);
+                transition.setFromY(1);
+                transition.setToY(0.1);
+                transition.setOnFinished(e -> container.getChildren().remove(finalNoticeBar));
+                transition.play();
+            }
+        }
+
+        abstract protected boolean getActivated();
+
+        abstract protected String getColorString();
+
+        abstract protected String getIconSVGPath();
+
+        abstract protected String getText();
+
+        protected double getHeight() {
+            return Font.getDefault().getSize() * 3;
+        }
+
+        protected double getWidth() {
+            Region region = (Region)container.getParent();
+            double regionWidth = region.getWidth() - region.getInsets().getLeft() - region.getInsets().getRight();
+            return regionWidth * widthScale;
+        }
+
+        protected Pane getNoticeBar(double width, double height) {
+            // Colors
+            Color color = Color.valueOf(getColorString());
+            BackgroundFill bgFill = new BackgroundFill(
+                    color.deriveColor(0, 0.62, 1.62, 0.38),
+                    new CornerRadii(borderRadius),
+                    new Insets(margin)
+            );
+            // Layouts
+            HBox bar = new HBox(internalSpacing);
+            bar.setBackground(new Background(bgFill));
+            bar.setMaxSize(width, height);
+            bar.setAlignment(Pos.CENTER_LEFT);
+            SVGPath icon = new SVGPath();
+            icon.setContent(getIconSVGPath());
+            icon.setFill(color);
+            icon.setScaleX(iconScale);
+            icon.setScaleY(iconScale);
+            icon.setTranslateX(margin);
+            Label label = new Label(getText());
+            label.setTextFill(color);
+            label.setMinWidth(width * widthScale * widthScale);
+            bar.getChildren().addAll(icon, label);
+            // Click event
+            try {
+                Method onClick = getClass().getDeclaredMethod("onClick", MouseEvent.class);
+                if (!NoticeBar.class.equals(onClick.getDeclaringClass())) {
+                    // If the method "onClick" has been overridden:
+                    bar.setCursor(Cursor.HAND);
+                    bar.setOnMouseClicked(this::onClick);
+                }
+            } catch (Exception ignored) {
+            }
+            return bar;
+        }
+
+        protected void onClick(MouseEvent event) {
+        }
+    }
+
+
+    abstract public static class Handbook {
+        public boolean hasShown = false;
+
+        public Handbook() {
+        }
+
+        abstract public String getTitle();
+
+        abstract public String getHeader();
+
+        abstract public String getContent();
+
+        public SVGPath getIcon() {
+            return GuiPrefabs.Icons.getIcon(GuiPrefabs.Icons.ICON_HELP_ALT, GuiPrefabs.Colors.COLOR_INFO);
+        }
+
+        public boolean hasShown() {
+            return hasShown;
+        }
+
+        public void setShown() {
+            hasShown = true;
+        }
+    }
 }
diff --git a/desktop/src/cn/harryh/arkpets/utils/GuiPrefabs.java b/desktop/src/cn/harryh/arkpets/utils/GuiPrefabs.java
index a576cc8e..7bf56b65 100644
--- a/desktop/src/cn/harryh/arkpets/utils/GuiPrefabs.java
+++ b/desktop/src/cn/harryh/arkpets/utils/GuiPrefabs.java
@@ -8,6 +8,7 @@
 import javafx.animation.FadeTransition;
 import javafx.collections.ObservableList;
 import javafx.event.ActionEvent;
+import javafx.event.Event;
 import javafx.event.EventHandler;
 import javafx.scene.Node;
 import javafx.scene.control.*;
@@ -23,21 +24,34 @@
 import java.net.SocketException;
 import java.net.SocketTimeoutException;
 import java.net.UnknownHostException;
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.Set;
 import java.util.zip.ZipException;
 
+import static cn.harryh.arkpets.Const.durationNormal;
+
 
 @SuppressWarnings("unused")
 public class GuiPrefabs {
     public static final String tooltipStyle = "-fx-text-fill:#FFF;-fx-font-size:10px;-fx-font-weight:normal;";
-    public static final String COLOR_INFO       = "#37B";
-    public static final String COLOR_SUCCESS    = "#5B5";
-    public static final String COLOR_WARNING    = "#E93";
-    public static final String COLOR_DANGER     = "#F54";
-    public static final String COLOR_WHITE      = "#FFF";
-    public static final String COLOR_BLACK      = "#000";
-    public static final String COLOR_DARK_GRAY  = "#222";
-    public static final String COLOR_GRAY       = "#444";
-    public static final String COLOR_LIGHT_GRAY = "#666";
+
+
+    public static class Colors {
+        public static final String COLOR_INFO       = "#37B";
+        public static final String COLOR_SUCCESS    = "#5B5";
+        public static final String COLOR_WARNING    = "#E93";
+        public static final String COLOR_DANGER     = "#F54";
+        public static final String COLOR_WHITE      = "#FFF";
+        public static final String COLOR_BLACK      = "#000";
+        public static final String COLOR_DARK_GRAY  = "#222";
+        public static final String COLOR_GRAY       = "#444";
+        public static final String COLOR_LIGHT_GRAY = "#666";
+
+        private Colors() {
+        }
+    }
+
 
     public static void fadeInNode(Node node, Duration duration, EventHandler<ActionEvent> onFinished) {
         FadeTransition fadeT = new FadeTransition(duration, node);
@@ -61,8 +75,15 @@ public static void fadeOutNode(Node node, Duration duration, EventHandler<Action
         fadeT.playFromStart();
     }
 
+    public static void replaceStyleClass(Node node, String from, String to) {
+        HashSet<String> styleClass = new HashSet<>(Set.copyOf(node.getStyleClass()));
+        styleClass.remove(from);
+        styleClass.add(to);
+        node.getStyleClass().setAll(styleClass);
+    }
+
 
-    public static class IconUtil {
+    public static class Icons {
         public static final String ICON_INFO        = "m12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z";
         public static final String ICON_INFO_ALT    = "m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z";
         public static final String ICON_HELP        = "m12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1.25 17c0 .69-.559 1.25-1.25 1.25-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25c.691 0 1.25.56 1.25 1.25zm1.393-9.998c-.608-.616-1.515-.955-2.551-.955-2.18 0-3.59 1.55-3.59 3.95h2.011c0-1.486.829-2.013 1.538-2.013.634 0 1.307.421 1.364 1.226.062.847-.39 1.277-.962 1.821-1.412 1.343-1.438 1.993-1.432 3.468h2.005c-.013-.664.03-1.203.935-2.178.677-.73 1.519-1.638 1.536-3.022.011-.924-.284-1.719-.854-2.297z";
@@ -86,6 +107,9 @@ public static SVGPath getIcon(String svg, String color) {
             svgPath.setFill(Paint.valueOf(color));
             return svgPath;
         }
+
+        private Icons() {
+        }
     }
 
 
@@ -117,7 +141,7 @@ public static JFXDialog createCommonDialog(StackPane root, Node graphic, String
             body.getChildren().add(h3);
 
             JFXDialogLayout layout = new JFXDialogLayout();
-            layout.setHeading(DialogUtil.getHeading(graphic, title, COLOR_LIGHT_GRAY));
+            layout.setHeading(DialogUtil.getHeading(graphic, title, Colors.COLOR_LIGHT_GRAY));
             layout.setBody(body);
             layout.setActions(DialogUtil.getOkayButton(dialog, root));
             dialog.setContent(layout);
@@ -156,7 +180,7 @@ public static JFXDialog createErrorDialog(StackPane root, Throwable e) {
             content.getChildren().add(textArea);
 
             JFXDialogLayout layout = new JFXDialogLayout();
-            layout.setHeading(DialogUtil.getHeading(IconUtil.getIcon(IconUtil.ICON_DANGER, COLOR_DANGER), "发生异常", COLOR_DANGER));
+            layout.setHeading(DialogUtil.getHeading(Icons.getIcon(Icons.ICON_DANGER, Colors.COLOR_DANGER), "发生异常", Colors.COLOR_DANGER));
             layout.setBody(content);
             layout.setActions(DialogUtil.getOkayButton(dialog, root));
             dialog.setContent(layout);
@@ -230,14 +254,14 @@ public static Node getHeading(Node graphic, String text, String color) {
 
         public static Node getPrefabsH2(String text) {
             Label h2 = new Label(text);
-            h2.setStyle("-fx-font-size:16px;-fx-text-fill:" + COLOR_DARK_GRAY);
+            h2.setStyle("-fx-font-size:16px;-fx-text-fill:" + Colors.COLOR_DARK_GRAY);
             h2.setWrapText(true);
             return h2;
         }
 
         public static Node getPrefabsH3(String text) {
             Label h3 = new Label(text);
-            h3.setStyle("-fx-font-size:12px;-fx-min-height:38px;-fx-wrap-text:true;-fx-text-fill:" + COLOR_LIGHT_GRAY);
+            h3.setStyle("-fx-font-size:12px;-fx-min-height:38px;-fx-wrap-text:true;-fx-text-fill:" + Colors.COLOR_LIGHT_GRAY);
             h3.setWrapText(true);
             return h3;
         }
@@ -245,8 +269,8 @@ public static Node getPrefabsH3(String text) {
         public static JFXButton getCancelButton(JFXDialog dialog, StackPane root) {
             JFXButton button = new JFXButton();
             button.setText("取 消");
-            button.setTextFill(Paint.valueOf(COLOR_WHITE));
-            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + COLOR_WHITE + ";-fx-background-color:" + COLOR_INFO);
+            button.setTextFill(Paint.valueOf(Colors.COLOR_WHITE));
+            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + Colors.COLOR_WHITE + ";-fx-background-color:" + Colors.COLOR_INFO);
             button.setOnAction(e -> disposeDialog(dialog, root));
             return button;
         }
@@ -254,8 +278,8 @@ public static JFXButton getCancelButton(JFXDialog dialog, StackPane root) {
         public static JFXButton getOkayButton(JFXDialog dialog, StackPane root) {
             JFXButton button = new JFXButton();
             button.setText("确 认");
-            button.setTextFill(Paint.valueOf(COLOR_WHITE));
-            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + COLOR_WHITE + ";-fx-background-color:" + COLOR_INFO);
+            button.setTextFill(Paint.valueOf(Colors.COLOR_WHITE));
+            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + Colors.COLOR_WHITE + ";-fx-background-color:" + Colors.COLOR_INFO);
             button.setOnAction(e -> disposeDialog(dialog, root));
             return button;
         }
@@ -263,7 +287,7 @@ public static JFXButton getOkayButton(JFXDialog dialog, StackPane root) {
         public static JFXButton getGotoButton(JFXDialog dialog, StackPane root) {
             JFXButton button = new JFXButton();
             button.setText("前 往");
-            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + COLOR_WHITE + ";-fx-background-color:" + COLOR_SUCCESS);
+            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + Colors.COLOR_WHITE + ";-fx-background-color:" + Colors.COLOR_SUCCESS);
             button.setOnAction(e -> disposeDialog(dialog, root));
             return button;
         }
@@ -271,35 +295,88 @@ public static JFXButton getGotoButton(JFXDialog dialog, StackPane root) {
         public static JFXButton getTrustButton(JFXDialog dialog, StackPane root) {
             JFXButton button = new JFXButton();
             button.setText("信 任");
-            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + COLOR_WHITE + ";-fx-background-color:" + COLOR_WARNING);
+            button.setStyle("-fx-font-size:13px;-fx-text-fill:" + Colors.COLOR_WHITE + ";-fx-background-color:" + Colors.COLOR_WARNING);
             button.setOnAction(e -> disposeDialog(dialog, root));
             return button;
         }
     }
 
 
-    abstract public static class Handbook {
-        public boolean hasShown = false;
+    /** @since ArkPets 3.0
+     */
+    public static class PeerNodeComposer {
+        protected int activatedId;
+        protected final HashMap<Integer, PeerNodeData> peerNodeMap;
 
-        public Handbook() {
+        public PeerNodeComposer() {
+            activatedId = -1;
+            peerNodeMap = new HashMap<>();
         }
 
-        abstract public String getTitle();
+        protected void add(int id, PeerNodeData nodeData) {
+            if (id < 0)
+                throw new IllegalArgumentException("ID can't be negative.");
+            if (peerNodeMap.containsKey(id))
+                throw new IllegalStateException("ID already existed.");
+            peerNodeMap.put(id, nodeData);
+        }
 
-        abstract public String getHeader();
+        public void add(int id, Node... nodes) {
+            add(id, new PeerNodeData(nodes, Event::consume, Event::consume));
+        }
+
+        public void add(int id, EventHandler<ActionEvent> onActivating, EventHandler<ActionEvent> onSuppressing, Node... nodes) {
+            add(id, new PeerNodeData(nodes, onActivating, onSuppressing));
+        }
 
-        abstract public String getContent();
+        public void activate(int id) {
+            if (!peerNodeMap.containsKey(id))
+                throw new IllegalStateException("ID not found");
+            peerNodeMap.keySet().forEach(i -> {
+                if (i == id)
+                    peerNodeMap.get(i).handleActivating();
+                else
+                    peerNodeMap.get(i).handleSuppressing();
+            });
+            activatedId = id;
+        }
 
-        public SVGPath getIcon() {
-            return IconUtil.getIcon(IconUtil.ICON_HELP_ALT, COLOR_INFO);
+        public void toggle(int id, int replacementId) {
+            if (!peerNodeMap.containsKey(id) || !peerNodeMap.containsKey(replacementId))
+                throw new IllegalStateException("ID not found");
+            activate(activatedId == id ? replacementId : id);
         }
 
-        public boolean hasShown() {
-            return hasShown;
+        public int getActivatedId() {
+            return activatedId;
         }
 
-        public void setShown() {
-            hasShown = true;
+        protected record PeerNodeData(Node[] nodes, EventHandler<ActionEvent> onActivating, EventHandler<ActionEvent> onSuppressing) {
+            public void handleActivating() {
+                for (Node node : nodes)
+                    activateNode(node);
+                if (onActivating != null)
+                    onActivating.handle(new ActionEvent(this, Event.NULL_SOURCE_TARGET));
+                if (nodes.length > 0 && nodes[0] != null)
+                    nodes[0].requestFocus();
+            }
+
+            public void handleSuppressing() {
+                for (Node node : nodes)
+                    suppressNode(node);
+                if (onSuppressing != null)
+                    onSuppressing.handle(new ActionEvent(this, Event.NULL_SOURCE_TARGET));
+            }
+
+            private void activateNode(Node node) {
+                node.setManaged(true);
+                fadeInNode(node, durationNormal, null);
+            }
+
+            private void suppressNode(Node node) {
+                node.setVisible(false);
+                node.setManaged(false);
+            }
         }
     }
 }