refactor: optimized loading of newer versions of the about page. (#211)

2020-07-11 16:56:29 +08:00 · 2020-07-11 16:56:29 +08:00 · 014413ef48
parent 7b06be9e0d
commit 014413ef48
23 changed files with 289 additions and 207 deletions
--- 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",
--- 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",
--- a/src/views/attachment/components/AttachmentSelectDrawer.vue
+++ b/src/views/attachment/components/AttachmentSelectDrawer.vue
--- 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 = {}
--- 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
--- 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()
--- 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 } })
--- 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 => {
--- 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)
--- 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 {
--- 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'
--- 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 } })
--- 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: [],
--- 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 {
--- 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'
--- 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 } })
--- 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)
+        })
    }
  }
 }
--- 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,
--- 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 {
--- 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('.')
--- 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,
--- 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,
--- 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