diff --git a/package-lock.json b/package-lock.json
index b91fb7281..37b64cb6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1349,6 +1349,22 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@simonwep/pickr": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.7.1.tgz",
+      "integrity": "sha512-ftbskrPKAkRLYVj8IhV4Bn86g16It9Uq/p4G0FdjRz36pKKjW0JdxdDWDIVuAev0Urg8604Ho98js6JmjXdiZQ==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "nanopop": "^1.3.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+        }
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2801,12 +2817,13 @@
       }
     },
     "ant-design-vue": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.6.2.tgz",
-      "integrity": "sha512-VEwWomHxY+0rt0RKRd4FqrW+udCr7cpFt0GwVOCJPwIdulkZkB3GjK64GslEl9XtBp/rKzcorfAx4t1ues6Izg==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.6.3.tgz",
+      "integrity": "sha512-Zt0z0SXzHCgow0chv4OA8lONxVOzXf7iLmZxdVHlsS3IaPn5n8QNPCzBUh3z0IXBdaDPiX9tjELQCXf9vdXdlw==",
       "requires": {
         "@ant-design/icons": "^2.1.1",
         "@ant-design/icons-vue": "^2.0.0",
+        "@simonwep/pickr": "~1.7.0",
         "add-dom-event-listener": "^1.0.2",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^3.0.3",
@@ -10729,9 +10746,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -11363,6 +11380,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "nanopop": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-1.3.0.tgz",
+      "integrity": "sha512-DQDhHyPhKLKrXOjVkChsAoWh/WpKuVINDKl4qvFbguqokRJWQBSNSlPzMS+Xy3yBQKeQ39rICMB2asDvdUiVxw=="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
diff --git a/package.json b/package.json
index 171c9a76b..c16acec83 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "ant-design-vue": "^1.6.2",
+    "ant-design-vue": "^1.6.3",
     "axios": "^0.19.2",
     "enquire.js": "^2.1.6",
     "filepond": "^4.18.0",
diff --git a/src/views/attachment/components/AttachmentSelectDrawer.vue b/src/components/Attachment/AttachmentSelectDrawer.vue
similarity index 100%
rename from src/views/attachment/components/AttachmentSelectDrawer.vue
rename to src/components/Attachment/AttachmentSelectDrawer.vue
diff --git a/src/components/index.js b/src/components/index.js
index ad3322d30..5571af021 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,14 +1,15 @@
 import Vue from 'vue'
 
-// pro components
 import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import FilePondUpload from '@/components/Upload/FilePondUpload'
+import AttachmentSelectDrawer from './Attachment/AttachmentSelectDrawer'
 
 const _components = {
   Ellipsis,
   FooterToolbar,
-  FilePondUpload
+  FilePondUpload,
+  AttachmentSelectDrawer
 }
 
 const components = {}
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 0bf7545cd..7d5cff04f 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -35,6 +35,8 @@
                     <a-select
                       v-model="queryParam.attachmentType"
                       @change="handleQuery()"
+                      :loading="typesLoading"
+                      allowClear
                     >
                       <a-select-option
                         v-for="item in types"
@@ -54,6 +56,8 @@
                     <a-select
                       v-model="queryParam.mediaType"
                       @change="handleQuery()"
+                      :loading="mediaTypesLoading"
+                      allowClear
                     >
                       <a-select-option
                         v-for="(item, index) in mediaTypes"
@@ -219,7 +223,9 @@ export default {
       selectAttachment: {},
       attachments: [],
       mediaTypes: [],
+      mediaTypesLoading: false,
       types: [],
+      typesLoading: false,
       editable: false,
       pagination: {
         page: 1,
@@ -288,14 +294,30 @@ export default {
         })
     },
     loadMediaTypes() {
-      attachmentApi.getMediaTypes().then(response => {
-        this.mediaTypes = response.data.data
-      })
+      this.mediaTypesLoading = true
+      attachmentApi
+        .getMediaTypes()
+        .then(response => {
+          this.mediaTypes = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.mediaTypesLoading = false
+          }, 200)
+        })
     },
     loadTypes() {
-      attachmentApi.getTypes().then(response => {
-        this.types = response.data.data
-      })
+      this.typesLoading = true
+      attachmentApi
+        .getTypes()
+        .then(response => {
+          this.types = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.typesLoading = false
+          }, 200)
+        })
     },
     handleShowDetailDrawer(attachment) {
       this.selectAttachment = attachment
diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue
index 3faec0cd5..5ae08d09c 100644
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@@ -27,6 +27,7 @@
                   v-model="queryParam.status"
                   placeholder="请选择评论状态"
                   @change="handleQuery()"
+                  allowClear
                 >
                   <a-select-option
                     v-for="status in Object.keys(commentStatus)"
@@ -574,11 +575,17 @@ export default {
       this.queryParam.page = this.pagination.page - 1
       this.queryParam.size = this.pagination.size
       this.queryParam.sort = this.pagination.sort
-      commentApi.queryComment(this.type, this.queryParam).then(response => {
-        this.comments = response.data.data.content
-        this.pagination.total = response.data.data.total
-        this.loading = false
-      })
+      commentApi
+        .queryComment(this.type, this.queryParam)
+        .then(response => {
+          this.comments = response.data.data.content
+          this.pagination.total = response.data.data.total
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = false
+          }, 200)
+        })
     },
     handleQuery() {
       this.handleClearRowKeys()
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 2b50837a3..777f2a5d0 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -288,9 +288,9 @@ export default {
   data() {
     return {
       logType: logApi.logType,
-      activityLoading: true,
-      writeLoading: true,
-      logLoading: true,
+      activityLoading: false,
+      writeLoading: false,
+      logLoading: false,
       statisticsLoading: true,
       logListDrawerVisible: false,
       latestPosts: [],
@@ -340,23 +340,44 @@ export default {
   },
   methods: {
     async listLatestPosts() {
-      postApi.listLatest(5).then(response => {
-        this.latestPosts = response.data.data
-        this.activityLoading = false
-      })
+      this.activityLoading = true
+      postApi
+        .listLatest(5)
+        .then(response => {
+          this.latestPosts = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.activityLoading = false
+          }, 200)
+        })
     },
     async listLatestLogs() {
-      logApi.listLatest(5).then(response => {
-        this.latestLogs = response.data.data
-        this.logLoading = false
-        this.writeLoading = false
-      })
+      this.logLoading = true
+      this.writeLoading = true
+      logApi
+        .listLatest(5)
+        .then(response => {
+          this.latestLogs = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.logLoading = false
+            this.writeLoading = false
+          }, 200)
+        })
     },
     async getStatistics() {
-      statisticsApi.statistics().then(response => {
-        this.statisticsData = response.data.data
-        this.statisticsLoading = false
-      })
+      statisticsApi
+        .statistics()
+        .then(response => {
+          this.statisticsData = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.statisticsLoading = false
+          }, 200)
+        })
     },
     handleEditPostClick(post) {
       this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 56cb2c591..b70240013 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -196,9 +196,7 @@
                 >获取</a-button>
               </a-form-item>
             </a-form>
-            <a-tabs
-              v-else
-            >
+            <a-tabs v-else>
               <a-tab-pane
                 tab="稳定版"
                 key="1"
@@ -341,10 +339,16 @@ export default {
   methods: {
     loadThemes() {
       this.themeLoading = true
-      themeApi.listAll().then(response => {
-        this.themes = response.data.data
-        this.themeLoading = false
-      })
+      themeApi
+        .listAll()
+        .then(response => {
+          this.themes = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.themeLoading = false
+          }, 200)
+        })
     },
 
     activeTheme(themeId) {
@@ -398,12 +402,10 @@ export default {
         return
       }
       this.fetchButtonLoading = true
-      themeApi
-        .fetchingBranches(this.fetchingUrl)
-        .then(response => {
-          this.branches = response.data.data
-          this.fetchBranches = true
-        })
+      themeApi.fetchingBranches(this.fetchingUrl).then(response => {
+        this.branches = response.data.data
+        this.fetchBranches = true
+      })
       themeApi
         .fetchingReleases(this.fetchingUrl)
         .then(response => {
@@ -414,22 +416,18 @@ export default {
         })
     },
     handleBranchFetching() {
-      themeApi
-        .fetchingBranch(this.fetchingUrl, this.branches[this.selectedBranch].branch)
-        .then(response => {
-          this.$message.success('拉取成功')
-          this.uploadThemeVisible = false
-          this.loadThemes()
-        })
+      themeApi.fetchingBranch(this.fetchingUrl, this.branches[this.selectedBranch].branch).then(response => {
+        this.$message.success('拉取成功')
+        this.uploadThemeVisible = false
+        this.loadThemes()
+      })
     },
     handleReleaseFetching() {
-      themeApi
-        .fetchingRelease(this.fetchingUrl, this.releases[this.selectedBranch].branch)
-        .then(response => {
-          this.$message.success('拉取成功')
-          this.uploadThemeVisible = false
-          this.loadThemes()
-        })
+      themeApi.fetchingRelease(this.fetchingUrl, this.releases[this.selectedBranch].branch).then(response => {
+        this.$message.success('拉取成功')
+        this.uploadThemeVisible = false
+        this.loadThemes()
+      })
     },
     handleReload() {
       themeApi.reload().then(response => {
diff --git a/src/views/interface/components/ThemeSetting.vue b/src/views/interface/components/ThemeSetting.vue
index 7c1e86e0d..8272c0585 100644
--- a/src/views/interface/components/ThemeSetting.vue
+++ b/src/views/interface/components/ThemeSetting.vue
@@ -231,6 +231,7 @@
       <a-button
         type="primary"
         @click="handleSaveSettings"
+        :loading="saving"
       >保存</a-button>
     </footer-tool-bar>
   </a-drawer>
@@ -238,7 +239,6 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
-import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 import Verte from 'verte'
 import 'verte/dist/verte.css'
@@ -247,7 +247,6 @@ export default {
   name: 'ThemeSetting',
   mixins: [mixin, mixinDevice],
   components: {
-    AttachmentSelectDrawer,
     FooterToolBar,
     Verte
   },
@@ -267,7 +266,8 @@ export default {
       },
       viewMode: false,
       formColValue: 12,
-      clientHeight: document.documentElement.clientHeight
+      clientHeight: document.documentElement.clientHeight,
+      saving: false
     }
   },
   model: {
@@ -320,12 +320,20 @@ export default {
       })
     },
     handleSaveSettings() {
-      themeApi.saveSettings(this.selectedTheme.id, this.themeSettings).then(response => {
-        this.$message.success('保存成功！')
-        if (this.viewMode) {
-          document.getElementById('themeViewIframe').contentWindow.location.reload(true)
-        }
-      })
+      this.saving = true
+      themeApi
+        .saveSettings(this.selectedTheme.id, this.themeSettings)
+        .then(response => {
+          this.$message.success('保存成功！')
+          if (this.viewMode) {
+            document.getElementById('themeViewIframe').contentWindow.location.reload(true)
+          }
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.saving = false
+          }, 200)
+        })
     },
     onClose() {
       this.$emit('close', false)
diff --git a/src/views/post/CategoryList.vue b/src/views/post/CategoryList.vue
index 61873a669..4e3b588c1 100644
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@@ -249,7 +249,6 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import CategorySelectTree from './components/CategorySelectTree'
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import categoryApi from '@/api/category'
 import menuApi from '@/api/menu'
 
@@ -281,7 +280,7 @@ const columns = [
   }
 ]
 export default {
-  components: { CategorySelectTree, AttachmentSelectDrawer },
+  components: { CategorySelectTree },
   mixins: [mixin, mixinDevice],
   data() {
     return {
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index 05465b3be..c8e59e92e 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -74,7 +74,7 @@ import moment from 'moment'
 import PostSettingDrawer from './components/PostSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
-import MarkdownEditor from '@/components/editor/MarkdownEditor'
+import MarkdownEditor from '@/components/Editor/MarkdownEditor'
 // import RichTextEditor from '@/components/editor/RichTextEditor'
 
 import postApi from '@/api/post'
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index 8cf09b31c..fd0f1a19a 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -27,6 +27,7 @@
                   v-model="queryParam.status"
                   placeholder="请选择文章状态"
                   @change="handleQuery()"
+                  allowClear
                 >
                   <a-select-option
                     v-for="status in Object.keys(postStatus)"
@@ -45,6 +46,8 @@
                   v-model="queryParam.categoryId"
                   placeholder="请选择分类"
                   @change="handleQuery()"
+                  :loading="categoriesLoading"
+                  allowClear
                 >
                   <a-select-option
                     v-for="category in categories"
@@ -513,11 +516,11 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import PostSettingDrawer from './components/PostSettingDrawer'
 import TargetCommentDrawer from '../comment/components/TargetCommentDrawer'
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import TagSelect from './components/TagSelect'
 import CategoryTree from './components/CategoryTree'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
+
 const columns = [
   {
     title: '标题',
@@ -570,7 +573,6 @@ const columns = [
 export default {
   name: 'PostList',
   components: {
-    AttachmentSelectDrawer,
     TagSelect,
     CategoryTree,
     PostSettingDrawer,
@@ -606,6 +608,7 @@ export default {
       ],
       posts: [],
       postsLoading: false,
+      categoriesLoading: false,
       postSettingVisible: false,
       postCommentVisible: false,
       selectedPost: {},
@@ -665,16 +668,30 @@ export default {
       this.queryParam.page = this.pagination.page - 1
       this.queryParam.size = this.pagination.size
       this.queryParam.sort = this.pagination.sort
-      postApi.query(this.queryParam).then(response => {
-        this.posts = response.data.data.content
-        this.pagination.total = response.data.data.total
-        this.postsLoading = false
-      })
+      postApi
+        .query(this.queryParam)
+        .then(response => {
+          this.posts = response.data.data.content
+          this.pagination.total = response.data.data.total
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.postsLoading = false
+          }, 200)
+        })
     },
     loadCategories() {
-      categoryApi.listAll(true).then(response => {
-        this.categories = response.data.data
-      })
+      this.categoriesLoading = true
+      categoryApi
+        .listAll(true)
+        .then(response => {
+          this.categories = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.categoriesLoading = false
+          }, 200)
+        })
     },
     handleEditClick(post) {
       this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
diff --git a/src/views/post/TagList.vue b/src/views/post/TagList.vue
index 6fca1a5f5..8be93047c 100644
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@@ -122,10 +122,8 @@
 
 <script>
 import tagApi from '@/api/tag'
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 
 export default {
-  components: { AttachmentSelectDrawer },
   data() {
     return {
       tags: [],
diff --git a/src/views/post/components/PostSettingDrawer.vue b/src/views/post/components/PostSettingDrawer.vue
index 5642a1728..5e8395228 100644
--- a/src/views/post/components/PostSettingDrawer.vue
+++ b/src/views/post/components/PostSettingDrawer.vue
@@ -309,7 +309,6 @@ import moment from 'moment'
 import CategoryTree from './CategoryTree'
 import CategorySelectTree from './CategorySelectTree'
 import TagSelect from './TagSelect'
-import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
 import { mapGetters } from 'vuex'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
@@ -320,8 +319,7 @@ export default {
   components: {
     CategoryTree,
     CategorySelectTree,
-    TagSelect,
-    AttachmentSelectDrawer
+    TagSelect
   },
   data() {
     return {
diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue
index 840668813..146c62229 100644
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@@ -69,7 +69,7 @@ import moment from 'moment'
 import SheetSettingDrawer from './components/SheetSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
-import MarkdownEditor from '@/components/editor/MarkdownEditor'
+import MarkdownEditor from '@/components/Editor/MarkdownEditor'
 // import RichTextEditor from '@/components/editor/RichTextEditor'
 
 import sheetApi from '@/api/sheet'
diff --git a/src/views/sheet/components/CustomSheetList.vue b/src/views/sheet/components/CustomSheetList.vue
index 853e3088e..011d5657b 100644
--- a/src/views/sheet/components/CustomSheetList.vue
+++ b/src/views/sheet/components/CustomSheetList.vue
@@ -440,11 +440,17 @@ export default {
       this.queryParam.page = this.pagination.page - 1
       this.queryParam.size = this.pagination.size
       this.queryParam.sort = this.pagination.sort
-      sheetApi.list(this.queryParam).then(response => {
-        this.sheets = response.data.data.content
-        this.pagination.total = response.data.data.total
-        this.loading = false
-      })
+      sheetApi
+        .list(this.queryParam)
+        .then(response => {
+          this.sheets = response.data.data.content
+          this.pagination.total = response.data.data.total
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = false
+          }, 200)
+        })
     },
     handleEditClick(sheet) {
       this.$router.push({ name: 'SheetEdit', query: { sheetId: sheet.id } })
diff --git a/src/views/sheet/components/IndependentSheetList.vue b/src/views/sheet/components/IndependentSheetList.vue
index 4dd23860b..3a1116248 100644
--- a/src/views/sheet/components/IndependentSheetList.vue
+++ b/src/views/sheet/components/IndependentSheetList.vue
@@ -16,9 +16,7 @@
       >
         <template slot="actions">
           <span>
-            <router-link
-              :to="{name:item.routeName}"
-            >
+            <router-link :to="{name:item.routeName}">
               <a-icon type="edit" />
             </router-link>
           </span>
@@ -83,9 +81,7 @@
         slot="action"
         slot-scope="text, record"
       >
-        <router-link
-          :to="{name:record.routeName}"
-        >
+        <router-link :to="{name:record.routeName}">
           <a href="javascript:void(0);">管理</a>
         </router-link>
         <a-divider type="vertical" />
@@ -144,10 +140,16 @@ export default {
   methods: {
     loadIndependentSheets() {
       this.loading = true
-      sheetApi.listIndependent().then(response => {
-        this.independentSheets = response.data.data
-        this.loading = false
-      })
+      sheetApi
+        .listIndependent()
+        .then(response => {
+          this.independentSheets = response.data.data
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = false
+          }, 200)
+        })
     }
   }
 }
diff --git a/src/views/sheet/components/SheetSettingDrawer.vue b/src/views/sheet/components/SheetSettingDrawer.vue
index 2f9ed4ce3..104b11143 100644
--- a/src/views/sheet/components/SheetSettingDrawer.vue
+++ b/src/views/sheet/components/SheetSettingDrawer.vue
@@ -216,16 +216,12 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import moment from 'moment'
-import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
 import { mapGetters } from 'vuex'
 import themeApi from '@/api/theme'
 import sheetApi from '@/api/sheet'
 export default {
   name: 'SheetSettingDrawer',
   mixins: [mixin, mixinDevice],
-  components: {
-    AttachmentSelectDrawer
-  },
   data() {
     return {
       thumbDrawerVisible: false,
diff --git a/src/views/sheet/independent/PhotoList.vue b/src/views/sheet/independent/PhotoList.vue
index 452226c48..c5d8da52c 100644
--- a/src/views/sheet/independent/PhotoList.vue
+++ b/src/views/sheet/independent/PhotoList.vue
@@ -138,7 +138,10 @@
         >保存</a-button>
       </template>
       <a-form layout="vertical">
-        <a-form-item label="页面标题：" help="* 需要主题进行适配">
+        <a-form-item
+          label="页面标题："
+          help="* 需要主题进行适配"
+        >
           <a-input v-model="options.photos_title" />
         </a-form-item>
         <a-form-item label="每页显示条数：">
@@ -330,14 +333,10 @@
 <script>
 import { mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
-import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
 import photoApi from '@/api/photo'
 import optionApi from '@/api/option'
 
 export default {
-  components: {
-    AttachmentSelectDrawer
-  },
   mixins: [mixin, mixinDevice],
   data() {
     return {
diff --git a/src/views/system/About.vue b/src/views/system/About.vue
index 717125be4..9599e1a9b 100644
--- a/src/views/system/About.vue
+++ b/src/views/system/About.vue
@@ -26,8 +26,11 @@
               :title="isLatest?'当前为最新版本':'有新版本'"
             >
               <template slot="content">
-                <p>{{ `当前版本：${environments.version}，` }}{{ isLatest?`已经是最新版本。`:`新版本：${latestData.name}，你可以点击下方按钮查看详情。` }}</p>
-                <a-button type="dashed" :href="latestData.html_url" target="_blank">查看详情</a-button>
+                <p>{{ versionMessage }}</p>
+                <a-button
+                  type="dashed"
+                  @click="handleShowVersionContent"
+                >查看详情</a-button>
               </template>
               <a-button
                 :loading="checking"
@@ -90,17 +93,30 @@
           </a-card>
         </a-card>
       </a-col>
+
+      <a-col :span="24">
+      </a-col>
     </a-row>
+
+    <a-modal
+      :title="versionContentModalTitle"
+      :visible="versionContentVisible"
+      ok-text="查看更多"
+      @cancel="versionContentVisible=false"
+      @ok="handleOpenVersionUrl"
+    >
+      <div v-html="versionContent"></div>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import adminApi from '@/api/admin'
 import axios from 'axios'
+import marked from 'marked'
 export default {
   data() {
     return {
-      adminVersion: this.VERSION,
       environments: {},
       contributors: [
         {
@@ -128,35 +144,38 @@ export default {
       contributorsLoading: true,
       checking: false,
       isLatest: false,
-      latestData: {}
+      latestData: {},
+      versionContentVisible: false
+    }
+  },
+  computed: {
+    versionMessage() {
+      return `当前版本：${this.environments.version}，${
+        this.isLatest ? '已经是最新版本。' : `新版本：${this.latestData.name}，你可以点击下方按钮查看详情。`
+      }`
+    },
+    versionContent() {
+      if (this.latestData && this.latestData.body) {
+        return marked(this.latestData.body)
+      } else {
+        return '暂无内容'
+      }
+    },
+    versionContentModalTitle() {
+      return `${this.latestData.name} 更新内容`
     }
   },
   created() {
     this.getEnvironments()
     this.fetchContributors()
-    this.checkServerUpdate()
-    // this.checkAdminUpdate()
   },
   methods: {
-    getEnvironments() {
-      adminApi.environments().then(response => {
+    async getEnvironments() {
+      await adminApi.environments().then(response => {
         this.environments = response.data.data
       })
+      this.checkServerUpdate()
     },
-    // confirmUpdate() {
-    //   this.updating = true
-    //   adminApi
-    //     .updateAdminAssets()
-    //     .then(response => {
-    //       this.$notification.success({
-    //         message: '更新成功',
-    //         description: '请刷新后体验最新版本！'
-    //       })
-    //     })
-    //     .finally(() => {
-    //       this.updating = false
-    //     })
-    // },
     handleCopyEnvironments() {
       const text = `版本：${this.environments.version}
 数据库：${this.environments.database}
@@ -172,22 +191,26 @@ User Agent：${navigator.userAgent}`
           this.$message.error('复制失败！')
         })
     },
-    async fetchContributors() {
-      this.contributorsLoading = true
+    fetchContributors() {
       const _this = this
+      _this.contributorsLoading = true
       axios
         .get('https://api.github.com/repos/halo-dev/halo/contributors')
         .then(response => {
           _this.contributors = response.data
-          this.contributorsLoading = false
         })
         .catch(function(error) {
           console.error('Fetch contributors error', error)
         })
+        .finally(() => {
+          setTimeout(() => {
+            _this.contributorsLoading = false
+          }, 200)
+        })
     },
-    async checkServerUpdate() {
+    checkServerUpdate() {
       const _this = this
-      this.checking = true
+      _this.checking = true
       axios
         .get('https://api.github.com/repos/halo-dev/halo/releases/latest')
         .then(response => {
@@ -202,11 +225,9 @@ User Agent：${navigator.userAgent}`
             _this.isLatest = true
             return
           }
-          _this.isLatest = false
           const title = '新版本提醒'
           const content = '检测到 Halo 新版本：' + data.name + '，点击下方按钮查看最新版本。'
-          const url = data.html_url
-          this.$notification.open({
+          _this.$notification.open({
             message: title,
             description: content,
             icon: <a-icon type="smile" style="color: #108ee9" />,
@@ -219,7 +240,7 @@ User Agent：${navigator.userAgent}`
                     size: 'small'
                   },
                   on: {
-                    click: () => window.open(url, '_blank')
+                    click: () => this.handleShowVersionContent()
                   }
                 },
                 '去看看'
@@ -231,51 +252,17 @@ User Agent：${navigator.userAgent}`
           console.error('Check update fail', error)
         })
         .finally(() => {
-          this.checking = false
+          setTimeout(() => {
+            this.checking = false
+          }, 200)
         })
     },
-    // async checkAdminUpdate() {
-    //   const _this = this
-
-    //   axios
-    //     .get('https://api.github.com/repos/halo-dev/halo-admin/releases/latest')
-    //     .then(response => {
-    //       const data = response.data
-    //       if (data.draft || data.prerelease) {
-    //         return
-    //       }
-    //       const current = _this.calculateIntValue(_this.adminVersion)
-    //       const latest = _this.calculateIntValue(data.name)
-    //       if (current >= latest) {
-    //         return
-    //       }
-    //       const title = '新版本提醒'
-    //       const content = '检测到 Admin 新版本：' + data.name + '，点击下方按钮可直接更新为最新版本。'
-    //       this.$notification.open({
-    //         message: title,
-    //         description: content,
-    //         icon: <a-icon type="smile" style="color: #108ee9" />,
-    //         btn: h => {
-    //           return h(
-    //             'a-button',
-    //             {
-    //               props: {
-    //                 type: 'primary',
-    //                 size: 'small'
-    //               },
-    //               on: {
-    //                 click: () => _this.confirmUpdate()
-    //               }
-    //             },
-    //             '点击更新'
-    //           )
-    //         }
-    //       })
-    //     })
-    //     .catch(function(error) {
-    //       console.error('Check update fail', error)
-    //     })
-    // },
+    handleShowVersionContent() {
+      this.versionContentVisible = true
+    },
+    handleOpenVersionUrl() {
+      window.open(this.latestData.html_url, '_blank')
+    },
     calculateIntValue(version) {
       version = version.replace(/v/g, '')
       const ss = version.split('.')
diff --git a/src/views/system/developer/tabs/OptionsList.vue b/src/views/system/developer/tabs/OptionsList.vue
index 5fcf23ece..a600e212c 100644
--- a/src/views/system/developer/tabs/OptionsList.vue
+++ b/src/views/system/developer/tabs/OptionsList.vue
@@ -27,6 +27,7 @@
                   v-model="queryParam.type"
                   placeholder="请选择类型"
                   @change="handleQuery()"
+                  allowClear
                 >
                   <a-select-option
                     v-for="item in Object.keys(optionType)"
@@ -224,7 +225,7 @@ export default {
         size: 10,
         sort: null,
         keyword: null,
-        status: null
+        type: null
       },
       optionToStage: {},
       loading: false,
diff --git a/src/views/system/optiontabs/GeneralTab.vue b/src/views/system/optiontabs/GeneralTab.vue
index 774286089..4b1d8e47a 100644
--- a/src/views/system/optiontabs/GeneralTab.vue
+++ b/src/views/system/optiontabs/GeneralTab.vue
@@ -65,12 +65,8 @@
 </template>
 
 <script>
-import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
 export default {
   name: 'GeneralTab',
-  components: {
-    AttachmentSelectDrawer
-  },
   props: {
     options: {
       type: Object,
diff --git a/src/views/user/Profile.vue b/src/views/user/Profile.vue
index 13e03e9a7..3ae3c4ff7 100644
--- a/src/views/user/Profile.vue
+++ b/src/views/user/Profile.vue
@@ -234,7 +234,7 @@
       :keyboard="false"
       :centered="true"
       :destroyOnClose="true"
-      :width="300"
+      :width="400"
     >
       <a-form v-if="mfaUsed">
         <a-form-item extra="* 需要验证两步验证码">
@@ -255,8 +255,11 @@
       <a-form v-else>
         <a-form-item
           label="1. 请扫描二维码或导入 key"
-          :extra="`MFAKey:${mfaParam.mfaKey}`"
+          :help="`MFAKey:${mfaParam.mfaKey}`"
         >
+          <template slot="extra">
+            <span style="color:red">* 建议保存此二维码或 MFAKey，验证设备丢失将无法找回，只能通过重置密码关闭二步验证。</span>
+          </template>
           <img
             width="100%"
             :src="mfaParam.qrImage"
@@ -281,19 +284,15 @@
 </template>
 
 <script>
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import userApi from '@/api/user'
 import statisticsApi from '@/api/statistics'
 import { mapMutations, mapGetters } from 'vuex'
 import MD5 from 'md5.js'
 
 export default {
-  components: {
-    AttachmentSelectDrawer
-  },
   data() {
     return {
-      statisticsLoading: true,
+      statisticsLoading: false,
       attachmentDrawerVisible: false,
       user: {},
       statistics: {},
@@ -348,12 +347,17 @@ export default {
   methods: {
     ...mapMutations({ setUser: 'SET_USER' }),
     getStatistics() {
-      statisticsApi.statisticsWithUser().then(response => {
-        this.user = response.data.data.user
-        this.statistics = response.data.data
-        this.statisticsLoading = false
-        this.mfaParam.mfaType = this.user.mfaType && this.user.mfaType
-      })
+      this.statisticsLoading = true
+      statisticsApi
+        .statisticsWithUser()
+        .then(response => {
+          this.user = response.data.data.user
+          this.statistics = response.data.data
+          this.mfaParam.mfaType = this.user.mfaType && this.user.mfaType
+        })
+        .finally(() => {
+          this.statisticsLoading = false
+        }, 200)
     },
     handleUpdatePassword() {
       // Check confirm password