diff --git a/public/images/dialog/file-white.svg b/public/images/dialog/file-white.svg
new file mode 100644
index 000000000..c0b6c8ed3
--- /dev/null
+++ b/public/images/dialog/file-white.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.5;fill:#FFFFFF;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M220.3,750h583.6c37.4,0,68-30.6,68-68V290c0-37.4-30.6-68-68-68H220.3c-37.4,0-68,30.6-68,68v392
+		C152.2,719.4,182.8,750,220.3,750z"/>
+	<path class="st1" d="M850,871.8H174c-48.2,0-87.2-39.1-87.2-87.2V239.4c0-48.2,39.1-87.2,87.2-87.2h274.4
+		c37.4,0,70.7,23.9,82.6,59.3l24.7,73c12,35.4,45.2,59.3,82.6,59.3h211.2c48.1,0,87.2,39,87.2,87.1l0.5,353.6
+		C937.3,832.7,898.2,871.8,850,871.8z"/>
+</g>
+</svg>
diff --git a/public/images/dialog/file.svg b/public/images/dialog/file.svg
new file mode 100644
index 000000000..8353dfb80
--- /dev/null
+++ b/public/images/dialog/file.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F9B552;}
+	.st1{fill:#FFCF5C;}
+</style>
+<g>
+	<path class="st0" d="M220.3,750h583.6c37.4,0,68-30.6,68-68V290c0-37.4-30.6-68-68-68H220.3c-37.4,0-68,30.6-68,68v392
+		C152.2,719.4,182.8,750,220.3,750z"/>
+	<path class="st1" d="M850,871.8H174c-48.2,0-87.2-39.1-87.2-87.2V239.4c0-48.2,39.1-87.2,87.2-87.2h274.4
+		c37.4,0,70.7,23.9,82.6,59.3l24.7,73c12,35.4,45.2,59.3,82.6,59.3h211.2c48.1,0,87.2,39,87.2,87.1l0.5,353.6
+		C937.3,832.7,898.2,871.8,850,871.8z"/>
+</g>
+</svg>
diff --git a/public/images/dialog/image-white.svg b/public/images/dialog/image-white.svg
new file mode 100644
index 000000000..56578ded1
--- /dev/null
+++ b/public/images/dialog/image-white.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M821.4,109.5H202.6c-51.4,0-93.1,41.8-93.1,93.1v618.8c0,51.4,41.8,93.1,93.1,93.1h618.8
+	c51.4,0,93.1-41.8,93.1-93.1V202.6C914.5,151.3,872.7,109.5,821.4,109.5z M622.4,310.3c50.3,0,91.3,40.9,91.3,91.3
+	s-40.9,91.3-91.3,91.3s-91.3-41-91.3-91.3S572.1,310.3,622.4,310.3z M852.4,821.4c0,17.1-13.9,31-31,31H202.6c-17.1,0-31-13.9-31-31
+	v-73.2l163.1-163.1c31.4-31.4,82.2-31.4,113.6,0l167.9,167.9l58.7-58.7c31.4-31.4,82.2-31.4,113.6,0l64,64V821.4z"/>
+</svg>
diff --git a/public/images/dialog/image.svg b/public/images/dialog/image.svg
new file mode 100644
index 000000000..e76c18511
--- /dev/null
+++ b/public/images/dialog/image.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#53CBAE;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M821.4,109.5H202.6c-51.4,0-93.1,41.8-93.1,93.1v618.8c0,51.4,41.8,93.1,93.1,93.1h618.8
+		c51.4,0,93.1-41.8,93.1-93.1V202.6C914.5,151.3,872.7,109.5,821.4,109.5z"/>
+	<path class="st1" d="M622.4,310.3c50.3,0,91.3,40.9,91.3,91.3s-40.9,91.3-91.3,91.3s-91.3-41-91.3-91.3S572.1,310.3,622.4,310.3z"
+		/>
+	<path class="st1" d="M852.4,821.4c0,17.1-13.9,31-31,31H202.6c-17.1,0-31-13.9-31-31v-73.2l163.1-163.1
+		c31.4-31.4,82.2-31.4,113.6,0l167.9,167.9l58.7-58.7c31.4-31.4,82.2-31.4,113.6,0l64,64V821.4z"/>
+</g>
+</svg>
diff --git a/public/images/dialog/link-white.svg b/public/images/dialog/link-white.svg
new file mode 100644
index 000000000..477feef1f
--- /dev/null
+++ b/public/images/dialog/link-white.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M591.3,685.1c-27.9,0-56.1-5.5-83.1-16.7c-24.9-10.3-47.6-25.7-67.5-45.5l-39.6-39.6
+			c-13.1-13.1-13.1-34.4,0-47.5c13.1-13.1,34.4-13.1,47.5,0l39.6,39.6c13.6,13.6,29,24.1,45.8,31c55.3,23,118,10.9,160-31
+			l110.8-110.8c56.7-56.7,56.7-149,0-205.8l-39.6-39.6c-56.8-56.8-149.1-56.7-205.8,0c-13.1,13.1-34.4,13.1-47.5,0
+			c-13.1-13.1-13.1-34.4,0-47.5c82.9-82.9,217.8-83,300.7,0l39.6,39.6c82.9,82.9,82.9,217.8,0,300.7L741.5,622.8
+			C700.8,663.5,646.7,685.1,591.3,685.1z"/>
+	</g>
+	<g>
+		<path class="st0" d="M361.6,914.5c-54.5,0-108.9-20.7-150.4-62.2l-39.6-39.6c-82.9-82.9-82.9-217.8,0-300.7l110.6-110.6
+			c61.3-61.3,152.8-79.1,233.3-45.6c24.9,10.3,47.6,25.7,67.5,45.6l39.6,39.5c13.1,13.1,13.1,34.4,0,47.5
+			c-13.1,13.1-34.4,13.1-47.5,0l-39.6-39.6c-13.6-13.7-29.1-24.1-45.8-31c-55.3-23.2-118-10.8-160,31L219.2,559.5
+			c-56.7,56.7-56.7,149,0,205.8l39.6,39.6c56.8,56.8,149,56.8,205.8,0c13.1-13.1,34.4-13.1,47.5,0c13.1,13.1,13.1,34.4,0,47.5
+			C470.6,893.8,416.1,914.5,361.6,914.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/images/dialog/link.svg b/public/images/dialog/link.svg
new file mode 100644
index 000000000..1e20706c2
--- /dev/null
+++ b/public/images/dialog/link.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#619BF2;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M591.3,685.1c-27.9,0-56.1-5.5-83.1-16.7c-24.9-10.3-47.6-25.7-67.5-45.5l-39.6-39.6
+			c-13.1-13.1-13.1-34.4,0-47.5c13.1-13.1,34.4-13.1,47.5,0l39.6,39.6c13.6,13.6,29,24.1,45.8,31c55.3,23,118,10.9,160-31
+			l110.8-110.8c56.7-56.7,56.7-149,0-205.8l-39.6-39.6c-56.8-56.8-149.1-56.7-205.8,0c-13.1,13.1-34.4,13.1-47.5,0
+			c-13.1-13.1-13.1-34.4,0-47.5c82.9-82.9,217.8-83,300.7,0l39.6,39.6c82.9,82.9,82.9,217.8,0,300.7L741.5,622.8
+			C700.8,663.5,646.7,685.1,591.3,685.1z"/>
+	</g>
+	<g>
+		<path class="st0" d="M361.6,914.5c-54.5,0-108.9-20.7-150.4-62.2l-39.6-39.6c-82.9-82.9-82.9-217.8,0-300.7l110.6-110.6
+			c61.3-61.3,152.8-79.1,233.3-45.6c24.9,10.3,47.6,25.7,67.5,45.6l39.6,39.5c13.1,13.1,13.1,34.4,0,47.5
+			c-13.1,13.1-34.4,13.1-47.5,0l-39.6-39.6c-13.6-13.7-29.1-24.1-45.8-31c-55.3-23.2-118-10.8-160,31L219.2,559.5
+			c-56.7,56.7-56.7,149,0,205.8l39.6,39.6c56.8,56.8,149,56.8,205.8,0c13.1-13.1,34.4-13.1,47.5,0c13.1,13.1,13.1,34.4,0,47.5
+			C470.6,893.8,416.1,914.5,361.6,914.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/images/dialog/msg-white.svg b/public/images/dialog/msg-white.svg
new file mode 100644
index 000000000..57bd172e0
--- /dev/null
+++ b/public/images/dialog/msg-white.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M852.2,116.8H171.8c-47,0-85,38.1-85,85v662.7c0,37.9,45.8,56.9,72.6,30.1l86.4-86.4
+		c16-16,37.6-24.9,60.1-24.9h546.3c47,0,85-38.1,85-85V201.9C937.2,154.9,899.1,116.8,852.2,116.8z M356.6,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S380.1,494.6,356.6,494.6z M526.7,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S550.2,494.6,526.7,494.6z M696.8,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S720.3,494.6,696.8,494.6z"/>
+</g>
+</svg>
diff --git a/public/images/dialog/msg.svg b/public/images/dialog/msg.svg
new file mode 100644
index 000000000..633590b17
--- /dev/null
+++ b/public/images/dialog/msg.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8BCF70;}
+</style>
+<g>
+	<path class="st0" d="M852.2,116.8H171.8c-47,0-85,38.1-85,85v662.7c0,37.9,45.8,56.9,72.6,30.1l86.4-86.4
+		c16-16,37.6-24.9,60.1-24.9h546.3c47,0,85-38.1,85-85V201.9C937.2,154.9,899.1,116.8,852.2,116.8z M356.6,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S380.1,494.6,356.6,494.6z M526.7,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S550.2,494.6,526.7,494.6z M696.8,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S720.3,494.6,696.8,494.6z"/>
+</g>
+</svg>
diff --git a/public/images/dialog/tag-white.svg b/public/images/dialog/tag-white.svg
new file mode 100644
index 000000000..1af06dd26
--- /dev/null
+++ b/public/images/dialog/tag-white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M905,334.3c-66-66-198.5-198.5-198.5-198.5c-53.8-53.8-112.3-61.2-152-29.4c-21.3,17-33.3,40.7-36.1,65.2
+	c-2.8,24.4-17.4,45.8-36.9,60.7l-6.5,5c-90.5,69.2-193.4,126.4-306.2,142.9c-25.2,3.7-49.2,17.1-65.7,40.3
+	c-28.3,39.7-19.4,95.2,15,129.7l153.3,153.3L133.2,841.8c-13.3,13.3-13.3,34.7,0,48c6.6,6.6,15.3,9.9,24,9.9c8.7,0,17.4-3.3,24-9.9
+	l138.3-138.3l129.1,129.1c58.8,58.8,113.7,67.5,153.3,39.7c20.1-14.1,33-33.8,38.6-55c27.5-104.2,62.3-206.4,127.2-292.4l23.3-31
+	c14.8-19.6,36.1-34.5,60.4-37.2c24.6-2.8,48.3-14.8,65.3-36.2C948.4,428.7,940.9,370.2,905,334.3z"/>
+</svg>
diff --git a/public/images/dialog/tag.svg b/public/images/dialog/tag.svg
new file mode 100644
index 000000000..2e8f1f2aa
--- /dev/null
+++ b/public/images/dialog/tag.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#9D95E5;}
+</style>
+<path class="st0" d="M905,334.3c-66-66-198.5-198.5-198.5-198.5c-53.8-53.8-112.3-61.2-152-29.4c-21.3,17-33.3,40.7-36.1,65.2
+	c-2.8,24.4-17.4,45.8-36.9,60.7l-6.5,5c-90.5,69.2-193.4,126.4-306.2,142.9c-25.2,3.7-49.2,17.1-65.7,40.3
+	c-28.3,39.7-19.4,95.2,15,129.7l153.3,153.3L133.2,841.8c-13.3,13.3-13.3,34.7,0,48c6.6,6.6,15.3,9.9,24,9.9c8.7,0,17.4-3.3,24-9.9
+	l138.3-138.3l129.1,129.1c58.8,58.8,113.7,67.5,153.3,39.7c20.1-14.1,33-33.8,38.6-55c27.5-104.2,62.3-206.4,127.2-292.4l23.3-31
+	c14.8-19.6,36.1-34.5,60.4-37.2c24.6-2.8,48.3-14.8,65.3-36.2C948.4,428.7,940.9,370.2,905,334.3z"/>
+</svg>
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 7cef0cf33..264b1a7a9 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -65,16 +65,21 @@
                     </ETooltip>
                 </div>
                 <transition name="fade">
-                    <ul v-if="dialogMsgList.length > 10 && msgTags.length > 1 && windowScrollY === 0" class="nav-tags">
-                        <li
-                            v-for="item in msgTags"
-                            :key="item.type"
-                            :class="{active: msgType === item.type}"
-                            @click="msgType=item.type">
-                            <i class="taskfont" v-html="item.icon"></i>
-                            <span>{{$L(item.label)}}</span>
-                        </li>
-                    </ul>
+                    <div v-if="dialogMsgList.length > 10 && msgTags.length > 1 && windowScrollY === 0" class="nav-tags scrollbar-hidden">
+                        <ul>
+                            <li
+                                v-for="item in msgTags"
+                                :key="item.type"
+                                :class="{
+                                    [`tag-${item.type||'msg'}`]: true,
+                                    active: msgType === item.type,
+                                }"
+                                @click="msgType=item.type">
+                                <i></i>
+                                <span>{{$L(item.label)}}</span>
+                            </li>
+                        </ul>
+                    </div>
                 </transition>
             </slot>
         </div>
@@ -91,7 +96,6 @@
             :item-class-add="itemClassAdd"
             :extra-props="{dialogData, operateVisible, operateItem, hidePercentage: isMyDialog, hideReply: msgId > 0}"
             :estimate-size="78"
-            :top-threshold="120"
             :keeps="70"
             @scroll="onScroll"
             @range="onRange"
@@ -586,13 +590,14 @@ export default {
         },
 
         msgType(type) {
-            if (!type) return
             this.onToBottom()
-            this.$store.dispatch("getDialogMsgs", {
-                dialog_id: this.dialogId,
-                msg_id: this.msgId,
-                msg_type: this.msgType,
-            }).catch(_ => {});
+            if (type) {
+                this.$store.dispatch("getDialogMsgs", {
+                    dialog_id: this.dialogId,
+                    msg_id: this.msgId,
+                    msg_type: this.msgType,
+                }).catch(_ => {});
+            }
         },
 
         dialogSearchMsgId() {
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 5f4b261a4..747c4862b 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -210,41 +210,96 @@
 
         .nav-tags {
             position: absolute;
-            top: 78px;
+            top: 70px;
             left: 0;
             width: 100%;
             z-index: 2;
+            padding: 4px 0;
             display: flex;
             align-items: center;
-            justify-content: center;
-            transition: all 0.2s;
+            justify-content: flex-start;
+            overflow-x: auto;
 
-            > li {
-                list-style: none;
+            > ul {
+                margin: 0 auto;
                 display: flex;
                 align-items: center;
-                margin: 0 7px;
-                padding: 3px 8px;
-                background-color: #c0c4cc;
-                color: #fff;
-                border-radius: 6px;
-                font-size: 12px;
-                cursor: pointer;
-                box-shadow: 0 1px 6px rgba(255, 255, 255, 0.2);
+                justify-content: center;
 
-                .taskfont {
-                    font-size: 13px;
-                    padding-right: 6px;
-                }
+                > li {
+                    list-style: none;
+                    display: flex;
+                    align-items: center;
+                    margin: 0 8px;
+                    padding: 4px 8px;
+                    color: $primary-title-color;
+                    background-color: #F2F2F2;
+                    border: 1px solid #F2F2F2;
+                    border-radius: 6px;
+                    font-size: 12px;
+                    cursor: pointer;
+                    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.2);
 
-                > span {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
+                    > i {
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 4px;
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        background-position: center center;
+                    }
 
-                &.active {
-                    background-color: $primary-color;
+                    > span {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+
+                    &.tag-file i {
+                        background-image: url("../images/dialog/file.svg");
+                    }
+
+                    &.tag-image i {
+                        background-image: url("../images/dialog/image.svg");
+                    }
+
+                    &.tag-link i {
+                        background-image: url("../images/dialog/link.svg");
+                    }
+
+                    &.tag-msg i {
+                        background-image: url("../images/dialog/msg.svg");
+                    }
+
+                    &.tag-tag i {
+                        background-image: url("../images/dialog/tag.svg");
+                    }
+
+                    &.active {
+                        color: #ffffff;
+                        background-color: $primary-color;
+                        border-color: $primary-color;
+
+                        &.tag-file i {
+                            background-image: url("../images/dialog/file-white.svg");
+                        }
+
+                        &.tag-image i {
+                            background-image: url("../images/dialog/image-white.svg");
+                        }
+
+                        &.tag-link i {
+                            background-image: url("../images/dialog/link-white.svg");
+                        }
+
+                        &.tag-msg i {
+                            background-image: url("../images/dialog/msg-white.svg");
+                        }
+
+                        &.tag-tag i {
+                            background-image: url("../images/dialog/tag-white.svg");
+                        }
+                    }
                 }
             }
         }
@@ -1278,10 +1333,11 @@
                 }
             }
             .nav-tags {
-                top: 60px;
-
-                > li {
-                    margin: 0 5px;
+                top: 58px;
+                > ul {
+                    > li {
+                        margin: 0 5px;
+                    }
                 }
             }
         }
diff --git a/resources/assets/statics/public/images/dialog/file-white.svg b/resources/assets/statics/public/images/dialog/file-white.svg
new file mode 100644
index 000000000..c0b6c8ed3
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/file-white.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.5;fill:#FFFFFF;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M220.3,750h583.6c37.4,0,68-30.6,68-68V290c0-37.4-30.6-68-68-68H220.3c-37.4,0-68,30.6-68,68v392
+		C152.2,719.4,182.8,750,220.3,750z"/>
+	<path class="st1" d="M850,871.8H174c-48.2,0-87.2-39.1-87.2-87.2V239.4c0-48.2,39.1-87.2,87.2-87.2h274.4
+		c37.4,0,70.7,23.9,82.6,59.3l24.7,73c12,35.4,45.2,59.3,82.6,59.3h211.2c48.1,0,87.2,39,87.2,87.1l0.5,353.6
+		C937.3,832.7,898.2,871.8,850,871.8z"/>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/file.svg b/resources/assets/statics/public/images/dialog/file.svg
new file mode 100644
index 000000000..8353dfb80
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/file.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F9B552;}
+	.st1{fill:#FFCF5C;}
+</style>
+<g>
+	<path class="st0" d="M220.3,750h583.6c37.4,0,68-30.6,68-68V290c0-37.4-30.6-68-68-68H220.3c-37.4,0-68,30.6-68,68v392
+		C152.2,719.4,182.8,750,220.3,750z"/>
+	<path class="st1" d="M850,871.8H174c-48.2,0-87.2-39.1-87.2-87.2V239.4c0-48.2,39.1-87.2,87.2-87.2h274.4
+		c37.4,0,70.7,23.9,82.6,59.3l24.7,73c12,35.4,45.2,59.3,82.6,59.3h211.2c48.1,0,87.2,39,87.2,87.1l0.5,353.6
+		C937.3,832.7,898.2,871.8,850,871.8z"/>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/image-white.svg b/resources/assets/statics/public/images/dialog/image-white.svg
new file mode 100644
index 000000000..56578ded1
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/image-white.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M821.4,109.5H202.6c-51.4,0-93.1,41.8-93.1,93.1v618.8c0,51.4,41.8,93.1,93.1,93.1h618.8
+	c51.4,0,93.1-41.8,93.1-93.1V202.6C914.5,151.3,872.7,109.5,821.4,109.5z M622.4,310.3c50.3,0,91.3,40.9,91.3,91.3
+	s-40.9,91.3-91.3,91.3s-91.3-41-91.3-91.3S572.1,310.3,622.4,310.3z M852.4,821.4c0,17.1-13.9,31-31,31H202.6c-17.1,0-31-13.9-31-31
+	v-73.2l163.1-163.1c31.4-31.4,82.2-31.4,113.6,0l167.9,167.9l58.7-58.7c31.4-31.4,82.2-31.4,113.6,0l64,64V821.4z"/>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/image.svg b/resources/assets/statics/public/images/dialog/image.svg
new file mode 100644
index 000000000..e76c18511
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/image.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#53CBAE;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M821.4,109.5H202.6c-51.4,0-93.1,41.8-93.1,93.1v618.8c0,51.4,41.8,93.1,93.1,93.1h618.8
+		c51.4,0,93.1-41.8,93.1-93.1V202.6C914.5,151.3,872.7,109.5,821.4,109.5z"/>
+	<path class="st1" d="M622.4,310.3c50.3,0,91.3,40.9,91.3,91.3s-40.9,91.3-91.3,91.3s-91.3-41-91.3-91.3S572.1,310.3,622.4,310.3z"
+		/>
+	<path class="st1" d="M852.4,821.4c0,17.1-13.9,31-31,31H202.6c-17.1,0-31-13.9-31-31v-73.2l163.1-163.1
+		c31.4-31.4,82.2-31.4,113.6,0l167.9,167.9l58.7-58.7c31.4-31.4,82.2-31.4,113.6,0l64,64V821.4z"/>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/link-white.svg b/resources/assets/statics/public/images/dialog/link-white.svg
new file mode 100644
index 000000000..477feef1f
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/link-white.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M591.3,685.1c-27.9,0-56.1-5.5-83.1-16.7c-24.9-10.3-47.6-25.7-67.5-45.5l-39.6-39.6
+			c-13.1-13.1-13.1-34.4,0-47.5c13.1-13.1,34.4-13.1,47.5,0l39.6,39.6c13.6,13.6,29,24.1,45.8,31c55.3,23,118,10.9,160-31
+			l110.8-110.8c56.7-56.7,56.7-149,0-205.8l-39.6-39.6c-56.8-56.8-149.1-56.7-205.8,0c-13.1,13.1-34.4,13.1-47.5,0
+			c-13.1-13.1-13.1-34.4,0-47.5c82.9-82.9,217.8-83,300.7,0l39.6,39.6c82.9,82.9,82.9,217.8,0,300.7L741.5,622.8
+			C700.8,663.5,646.7,685.1,591.3,685.1z"/>
+	</g>
+	<g>
+		<path class="st0" d="M361.6,914.5c-54.5,0-108.9-20.7-150.4-62.2l-39.6-39.6c-82.9-82.9-82.9-217.8,0-300.7l110.6-110.6
+			c61.3-61.3,152.8-79.1,233.3-45.6c24.9,10.3,47.6,25.7,67.5,45.6l39.6,39.5c13.1,13.1,13.1,34.4,0,47.5
+			c-13.1,13.1-34.4,13.1-47.5,0l-39.6-39.6c-13.6-13.7-29.1-24.1-45.8-31c-55.3-23.2-118-10.8-160,31L219.2,559.5
+			c-56.7,56.7-56.7,149,0,205.8l39.6,39.6c56.8,56.8,149,56.8,205.8,0c13.1-13.1,34.4-13.1,47.5,0c13.1,13.1,13.1,34.4,0,47.5
+			C470.6,893.8,416.1,914.5,361.6,914.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/link.svg b/resources/assets/statics/public/images/dialog/link.svg
new file mode 100644
index 000000000..1e20706c2
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/link.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#619BF2;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M591.3,685.1c-27.9,0-56.1-5.5-83.1-16.7c-24.9-10.3-47.6-25.7-67.5-45.5l-39.6-39.6
+			c-13.1-13.1-13.1-34.4,0-47.5c13.1-13.1,34.4-13.1,47.5,0l39.6,39.6c13.6,13.6,29,24.1,45.8,31c55.3,23,118,10.9,160-31
+			l110.8-110.8c56.7-56.7,56.7-149,0-205.8l-39.6-39.6c-56.8-56.8-149.1-56.7-205.8,0c-13.1,13.1-34.4,13.1-47.5,0
+			c-13.1-13.1-13.1-34.4,0-47.5c82.9-82.9,217.8-83,300.7,0l39.6,39.6c82.9,82.9,82.9,217.8,0,300.7L741.5,622.8
+			C700.8,663.5,646.7,685.1,591.3,685.1z"/>
+	</g>
+	<g>
+		<path class="st0" d="M361.6,914.5c-54.5,0-108.9-20.7-150.4-62.2l-39.6-39.6c-82.9-82.9-82.9-217.8,0-300.7l110.6-110.6
+			c61.3-61.3,152.8-79.1,233.3-45.6c24.9,10.3,47.6,25.7,67.5,45.6l39.6,39.5c13.1,13.1,13.1,34.4,0,47.5
+			c-13.1,13.1-34.4,13.1-47.5,0l-39.6-39.6c-13.6-13.7-29.1-24.1-45.8-31c-55.3-23.2-118-10.8-160,31L219.2,559.5
+			c-56.7,56.7-56.7,149,0,205.8l39.6,39.6c56.8,56.8,149,56.8,205.8,0c13.1-13.1,34.4-13.1,47.5,0c13.1,13.1,13.1,34.4,0,47.5
+			C470.6,893.8,416.1,914.5,361.6,914.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/msg-white.svg b/resources/assets/statics/public/images/dialog/msg-white.svg
new file mode 100644
index 000000000..57bd172e0
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/msg-white.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M852.2,116.8H171.8c-47,0-85,38.1-85,85v662.7c0,37.9,45.8,56.9,72.6,30.1l86.4-86.4
+		c16-16,37.6-24.9,60.1-24.9h546.3c47,0,85-38.1,85-85V201.9C937.2,154.9,899.1,116.8,852.2,116.8z M356.6,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S380.1,494.6,356.6,494.6z M526.7,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S550.2,494.6,526.7,494.6z M696.8,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S720.3,494.6,696.8,494.6z"/>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/msg.svg b/resources/assets/statics/public/images/dialog/msg.svg
new file mode 100644
index 000000000..633590b17
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/msg.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8BCF70;}
+</style>
+<g>
+	<path class="st0" d="M852.2,116.8H171.8c-47,0-85,38.1-85,85v662.7c0,37.9,45.8,56.9,72.6,30.1l86.4-86.4
+		c16-16,37.6-24.9,60.1-24.9h546.3c47,0,85-38.1,85-85V201.9C937.2,154.9,899.1,116.8,852.2,116.8z M356.6,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S380.1,494.6,356.6,494.6z M526.7,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S550.2,494.6,526.7,494.6z M696.8,494.6
+		c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S720.3,494.6,696.8,494.6z"/>
+</g>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/tag-white.svg b/resources/assets/statics/public/images/dialog/tag-white.svg
new file mode 100644
index 000000000..1af06dd26
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/tag-white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M905,334.3c-66-66-198.5-198.5-198.5-198.5c-53.8-53.8-112.3-61.2-152-29.4c-21.3,17-33.3,40.7-36.1,65.2
+	c-2.8,24.4-17.4,45.8-36.9,60.7l-6.5,5c-90.5,69.2-193.4,126.4-306.2,142.9c-25.2,3.7-49.2,17.1-65.7,40.3
+	c-28.3,39.7-19.4,95.2,15,129.7l153.3,153.3L133.2,841.8c-13.3,13.3-13.3,34.7,0,48c6.6,6.6,15.3,9.9,24,9.9c8.7,0,17.4-3.3,24-9.9
+	l138.3-138.3l129.1,129.1c58.8,58.8,113.7,67.5,153.3,39.7c20.1-14.1,33-33.8,38.6-55c27.5-104.2,62.3-206.4,127.2-292.4l23.3-31
+	c14.8-19.6,36.1-34.5,60.4-37.2c24.6-2.8,48.3-14.8,65.3-36.2C948.4,428.7,940.9,370.2,905,334.3z"/>
+</svg>
diff --git a/resources/assets/statics/public/images/dialog/tag.svg b/resources/assets/statics/public/images/dialog/tag.svg
new file mode 100644
index 000000000..2e8f1f2aa
--- /dev/null
+++ b/resources/assets/statics/public/images/dialog/tag.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#9D95E5;}
+</style>
+<path class="st0" d="M905,334.3c-66-66-198.5-198.5-198.5-198.5c-53.8-53.8-112.3-61.2-152-29.4c-21.3,17-33.3,40.7-36.1,65.2
+	c-2.8,24.4-17.4,45.8-36.9,60.7l-6.5,5c-90.5,69.2-193.4,126.4-306.2,142.9c-25.2,3.7-49.2,17.1-65.7,40.3
+	c-28.3,39.7-19.4,95.2,15,129.7l153.3,153.3L133.2,841.8c-13.3,13.3-13.3,34.7,0,48c6.6,6.6,15.3,9.9,24,9.9c8.7,0,17.4-3.3,24-9.9
+	l138.3-138.3l129.1,129.1c58.8,58.8,113.7,67.5,153.3,39.7c20.1-14.1,33-33.8,38.6-55c27.5-104.2,62.3-206.4,127.2-292.4l23.3-31
+	c14.8-19.6,36.1-34.5,60.4-37.2c24.6-2.8,48.3-14.8,65.3-36.2C948.4,428.7,940.9,370.2,905,334.3z"/>
+</svg>