chore: upgrade vue cli to 5.0 (#417)

Signed-off-by: Ryan Wang <i@ryanc.cc>
2022-01-21 16:50:23 +08:00 · 2022-01-21 16:50:23 +08:00 · 01a9e45e1a
parent 483577f447
commit 01a9e45e1a
61 changed files with 3152 additions and 7156 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -3,12 +3,24 @@ module.exports = {
  env: {
    node: true
  },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-mutating-props': 0,
+    'vue/multi-word-component-names': 0,
+    'prettier/prettier': [
+      'error',
+      {
+        printWidth: 120,
+        semi: false,
+        singleQuote: true,
+        trailingComma: 'none',
+        arrowParens: 'avoid'
+      }
+    ]
  }
 }
--- a/.prettierrc
+++ b/.prettierrc
@ -1,5 +1,7 @@
 {
  "printWidth": 120,
  "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }
--- a/babel.config.js
+++ b/babel.config.js
@ -1,11 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app',
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'entry'
-      }
-    ]
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }
--- a/package.json
+++ b/package.json
@ -21,10 +21,10 @@
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
-    "@codemirror/basic-setup": "^0.19.0",
-    "@codemirror/lang-html": "^0.19.3",
+    "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/lang-html": "^0.19.4",
    "@codemirror/lang-java": "^0.19.1",
-    "@halo-dev/admin-api": "^1.0.0-alpha.46",
+    "@halo-dev/admin-api": "^1.0.0-alpha.47",
    "ant-design-vue": "^1.7.8",
    "dayjs": "^1.10.7",
    "enquire.js": "^2.1.6",
@ -33,6 +33,7 @@
    "filepond-plugin-image-preview": "^4.6.10",
    "halo-editor": "^2.8.3",
    "marked": "^4.0.10",
+    "md5.js": "^1.3.5",
    "nprogress": "^0.2.0",
    "tiny-pinyin": "^1.3.2",
    "verte": "^0.0.12",
@ -48,26 +49,22 @@
    "vuex": "^3.6.2"
  },
  "devDependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.2.2",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-import": "^1.13.3",
-    "eslint": "^6.8.0",
-    "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "@babel/core": "^7.16.10",
+    "@babel/eslint-parser": "^7.16.5",
+    "@vue/cli-plugin-babel": "~5.0.0-rc.2",
+    "@vue/cli-plugin-eslint": "~5.0.0-rc.2",
+    "@vue/cli-plugin-router": "~5.0.0-rc.2",
+    "@vue/cli-plugin-vuex": "~5.0.0-rc.2",
+    "@vue/cli-service": "~5.0.0-rc.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.3.0",
    "husky": "^6.0.0",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "^1.19.1",
+    "lint-staged": "^11.2.6",
+    "prettier": "^2.5.1",
    "tailwindcss": "^1.9.6",
    "vue-template-compiler": "^2.6.14"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Attachment/AttachmentSelectDrawer.vue
+++ b/src/components/Attachment/AttachmentSelectDrawer.vue
@ -21,7 +21,7 @@
              v-for="(item, index) in attachments"
              v-else
              :key="index"
-              class="attach-item  attachments-group-item"
+              class="attach-item attachments-group-item"
              @click="handleSelectAttachment(item)"
            >
              <span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
--- a/src/components/GlobalFooter/GlobalFooter.vue
+++ b/src/components/GlobalFooter/GlobalFooter.vue
@ -1,10 +1,8 @@
 <template>
-  <div class="footer text-center" style="padding: 0 16px;margin: 48px 0 0;">
-    <div class="copyright" style="color: rgba(0, 0, 0, 0.45);font-size: 14px;">
+  <div class="footer text-center" style="padding: 0 16px; margin: 48px 0 0">
+    <div class="copyright" style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
      Proudly power by
-      <router-link :to="{ name: 'About' }">
-        Halo
-      </router-link>
+      <router-link :to="{ name: 'About' }"> Halo </router-link>
    </div>
  </div>
 </template>
--- a/src/components/GlobalHeader/GlobalHeader.vue
+++ b/src/components/GlobalHeader/GlobalHeader.vue
@ -7,7 +7,7 @@
          fixedHeader && 'ant-header-fixedHeader',
          sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
        ]"
-        style="padding:0"
+        style="padding: 0"
      >
        <div v-if="mode === 'sidemenu'" class="header">
          <a-icon
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@ -9,17 +9,17 @@
    >
      <a-form-model-item v-if="!form.needAuthCode" prop="username">
        <a-input v-model="form.model.username" placeholder="用户名/邮箱">
-          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
+          <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item v-if="!form.needAuthCode" prop="password">
        <a-input v-model="form.model.password" placeholder="密码" type="password">
-          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
+          <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item v-if="form.needAuthCode" prop="authcode">
        <a-input v-model="form.model.authcode" :maxLength="6" placeholder="两步验证码">
-          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
+          <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="safety-certificate" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
--- a/src/components/Menu/SideMenu.vue
+++ b/src/components/Menu/SideMenu.vue
@ -12,7 +12,7 @@
      :menu="menus"
      :mode="mode"
      :theme="theme"
-      style="padding: 16px 0px;"
+      style="padding: 16px 0px"
      @select="onSelect"
    ></s-menu>
  </a-layout-sider>
--- a/src/components/Menu/menu.js
+++ b/src/components/Menu/menu.js
@ -50,7 +50,7 @@ export default {
        this.openKeys = this.cachedOpenKeys
      }
    },
-    $route: function() {
+    $route: function () {
      this.updateMenu()
    }
  },
--- a/src/components/Menu/menu.render.js
+++ b/src/components/Menu/menu.render.js
@ -52,12 +52,12 @@ export default {
        this.openKeys = this.cachedOpenKeys
      }
    },
-    $route: function() {
+    $route: function () {
      this.updateMenu()
    }
  },
  methods: {
-    renderIcon: function(h, icon) {
+    renderIcon: function (h, icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }
@ -65,7 +65,7 @@ export default {
      typeof icon === 'object' ? (props.component = icon) : (props.type = icon)
      return h(Icon, { props: { ...props } })
    },
-    renderMenuItem: function(h, menu, pIndex, index) {
+    renderMenuItem: function (h, menu, pIndex, index) {
      const target = menu.meta.target || null
      return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
        h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
@ -74,30 +74,30 @@ export default {
        ])
      ])
    },
-    renderSubMenu: function(h, menu, pIndex, index) {
+    renderSubMenu: function (h, menu, pIndex, index) {
      const this2_ = this
      const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
      const itemArr = []
      const pIndex_ = pIndex + '_' + index
      this.$log.debug('menu', menu)
      if (!menu.hideChildrenInMenu) {
-        menu.children.forEach(function(item, i) {
+        menu.children.forEach(function (item, i) {
          itemArr.push(this2_.renderItem(h, item, pIndex_, i))
        })
      }
      return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
    },
-    renderItem: function(h, menu, pIndex, index) {
+    renderItem: function (h, menu, pIndex, index) {
      if (!menu.hidden) {
        return menu.children && !menu.hideChildrenInMenu
          ? this.renderSubMenu(h, menu, pIndex, index)
          : this.renderMenuItem(h, menu, pIndex, index)
      }
    },
-    renderMenu: function(h, menuTree) {
+    renderMenu: function (h, menuTree) {
      const this2_ = this
      const menuArr = []
-      menuTree.forEach(function(menu, i) {
+      menuTree.forEach(function (menu, i) {
        if (!menu.hidden) {
          menuArr.push(this2_.renderItem(h, menu, '0', i))
        }
--- a/src/components/Post/MetaEditor.vue
+++ b/src/components/Post/MetaEditor.vue
@ -45,7 +45,7 @@ export default {
    target: {
      type: String,
      default: 'post',
-      validator: function(value) {
+      validator: function (value) {
        return ['post', 'sheet'].indexOf(value) !== -1
      }
    },
--- a/src/components/SettingDrawer/SettingDrawer.vue
+++ b/src/components/SettingDrawer/SettingDrawer.vue
@ -63,13 +63,11 @@
          <a-list :split="false">
            <a-list-item>
              <a-tooltip slot="actions">
-                <template slot="title">
-                  该设定仅 [顶部栏导航] 时有效
-                </template>
+                <template slot="title"> 该设定仅 [顶部栏导航] 时有效 </template>
                <a-select
                  :defaultValue="contentWidth"
                  size="small"
-                  style="width: 80px;"
+                  style="width: 80px"
                  @change="handleContentWidthChange"
                >
                  <a-select-option value="Fixed">固定</a-select-option>
--- a/src/components/Upload/FilePondUpload.vue
+++ b/src/components/Upload/FilePondUpload.vue
@ -98,7 +98,7 @@ export default {
      return 1
    }
  },
-  data: function() {
+  data: function () {
    return {
      server: {
        process: (fieldName, file, metadata, load, error, progress, abort) => {
--- a/src/filters/filter.js
+++ b/src/filters/filter.js
@ -7,25 +7,25 @@ import { timeAgo } from '@/utils/datetime'

 dayjs.locale('zh-cn')

-Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm') {
+Vue.filter('moment', function (dataStr, pattern = 'YYYY-MM-DD HH:mm') {
  return dayjs(dataStr).format(pattern)
 })

-Vue.filter('moment_post_date', function(dataStr, pattern = '/YYYY/MM/') {
+Vue.filter('moment_post_date', function (dataStr, pattern = '/YYYY/MM/') {
  return dayjs(dataStr).format(pattern)
 })

-Vue.filter('moment_post_year', function(dataStr, pattern = '/YYYY/') {
+Vue.filter('moment_post_year', function (dataStr, pattern = '/YYYY/') {
  return dayjs(dataStr).format(pattern)
 })

-Vue.filter('moment_post_day', function(dataStr, pattern = '/YYYY/MM/DD/') {
+Vue.filter('moment_post_day', function (dataStr, pattern = '/YYYY/MM/DD/') {
  return dayjs(dataStr).format(pattern)
 })

 Vue.filter('timeAgo', timeAgo)

-Vue.filter('fileSizeFormat', function(value) {
+Vue.filter('fileSizeFormat', function (value) {
  if (!value) {
    return '0 Bytes'
  }
@ -37,7 +37,7 @@ Vue.filter('fileSizeFormat', function(value) {
  return size + ' ' + unitArr[index]
 })

-Vue.filter('dayTime', function(value) {
+Vue.filter('dayTime', function (value) {
  const days = Math.floor(value / 86400)
  const hours = Math.floor((value % 86400) / 3600)
  const minutes = Math.floor(((value % 86400) % 3600) / 60)
--- a/src/main.js
+++ b/src/main.js
@ -10,10 +10,10 @@ import './core/lazy_use'
 import '@/router/guard/'
 import '@/filters/filter' // global filter
 import './components'
-import { version } from '../package.json'
+import pkg from '../package.json'

 Vue.config.productionTip = false
-Vue.prototype.VERSION = version
+Vue.prototype.VERSION = pkg.version

 Vue.use(router)
 Vue.use(Contextmenu)
--- a/src/mixins/mixin.js
+++ b/src/mixins/mixin.js
@ -61,12 +61,14 @@ const mixinPostEdit = {
      const toolbarHeight = 64
      const contentMarginTop = 24
      const titleInputHeight = 40
-      return `calc(100vh - ${toolbarHeight +
+      return `calc(100vh - ${
+        toolbarHeight +
        contentMarginTop +
        titleInputHeight +
        this.viewMetas.pageHeaderHeight +
        this.viewMetas.pageFooterHeight +
-        10}px - 1rem)`
+        10
+      }px - 1rem)`
    }
  },
  mounted() {
--- a/src/utils/api-client.js
+++ b/src/utils/api-client.js
@ -22,7 +22,6 @@ haloRestApiClient.interceptors.request.use(
    return config
  },
  error => {
-    console.log('request error', error)
    return Promise.reject(error)
  }
 )
--- a/src/utils/device.js
+++ b/src/utils/device.js
@ -6,7 +6,7 @@ export const DEVICE_TYPE = {
  MOBILE: 'mobile'
 }

-export const deviceEnquire = function(callback) {
+export const deviceEnquire = function (callback) {
  const matchDesktop = {
    match: () => {
      callback && callback(DEVICE_TYPE.DESKTOP)
--- a/src/utils/domUtil.js
+++ b/src/utils/domUtil.js
@ -1,4 +1,4 @@
-export const setDocumentTitle = function(title) {
+export const setDocumentTitle = function (title) {
  document.title = title
  const ua = navigator.userAgent
  // eslint-disable-next-line
@ -7,8 +7,8 @@ export const setDocumentTitle = function(title) {
    const i = document.createElement('iframe')
    i.src = '/favicon.ico'
    i.style.display = 'none'
-    i.onload = function() {
-      setTimeout(function() {
+    i.onload = function () {
+      setTimeout(function () {
        i.remove()
      }, 9)
    }
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@ -240,7 +240,7 @@ export default {
      }
    },
    isImage() {
-      return function(attachment) {
+      return function (attachment) {
        if (!attachment || !attachment.mediaType) {
          return false
        }
--- a/src/views/attachment/components/AttachmentDetailModal.vue
+++ b/src/views/attachment/components/AttachmentDetailModal.vue
@ -11,7 +11,7 @@
      </a-col>
      <a-col :lg="15" :md="24" :sm="24" :xl="15" :xs="24">
        <a-list itemLayout="horizontal">
-          <a-list-item style="padding-top: 0;">
+          <a-list-item style="padding-top: 0">
            <a-list-item-meta>
              <template v-if="editable" slot="description">
                <a-input ref="nameInput" v-model="attachment.name" @blur="handleUpdateName" />
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@ -35,19 +35,13 @@
        <a-dropdown v-show="list.params.status != null && list.params.status !== '' && !isMobile()">
          <a-menu slot="overlay">
            <a-menu-item v-if="list.params.status === 'AUDITING'" key="1">
-              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.PUBLISHED.value)">
-                通过
-              </a>
+              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.PUBLISHED.value)"> 通过 </a>
            </a-menu-item>
            <a-menu-item v-if="list.params.status === 'PUBLISHED' || list.params.status === 'AUDITING'" key="2">
-              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.RECYCLE.value)">
-                移到回收站
-              </a>
+              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.RECYCLE.value)"> 移到回收站 </a>
            </a-menu-item>
            <a-menu-item v-if="list.params.status === 'RECYCLE'" key="3">
-              <a href="javascript:void(0);" @click="handleDeleteMore">
-                永久删除
-              </a>
+              <a href="javascript:void(0);" @click="handleDeleteMore"> 永久删除 </a>
            </a-menu-item>
          </a-menu>
          <a-button>
@ -130,19 +124,19 @@
              <span
                v-if="item.authorUrl"
                slot="title"
-                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
              >
-                <a-icon v-if="item.isAdmin" style="margin-right: 3px;" type="user" />&nbsp;
+                <a-icon v-if="item.isAdmin" style="margin-right: 3px" type="user" />&nbsp;
                <a :href="item.authorUrl" target="_blank">{{ item.author }}</a>
-                &nbsp;<small style="color:rgba(0, 0, 0, 0.45)">{{ item.createTime | timeAgo }}</small>
+                &nbsp;<small style="color: rgba(0, 0, 0, 0.45)">{{ item.createTime | timeAgo }}</small>
              </span>
              <span
                v-else
                slot="title"
-                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
              >
-                <a-icon v-if="item.isAdmin" style="margin-right: 3px;" type="user" />&nbsp;{{ item.author }}&nbsp;<small
-                  style="color:rgba(0, 0, 0, 0.45)"
+                <a-icon v-if="item.isAdmin" style="margin-right: 3px" type="user" />&nbsp;{{ item.author }}&nbsp;<small
+                  style="color: rgba(0, 0, 0, 0.45)"
                >
                  {{ item.createTime | timeAgo }}
                </small>
@ -167,7 +161,7 @@
          scrollToFirstRowOnChange
        >
          <template slot="author" slot-scope="text, record">
-            <a-icon v-if="record.isAdmin" style="margin-right: 3px;" type="user" />
+            <a-icon v-if="record.isAdmin" style="margin-right: 3px" type="user" />
            <a v-if="record.authorUrl" :href="record.authorUrl" target="_blank">{{ text }}</a>
            <span v-else>{{ text }}</span>
          </template>
@ -396,7 +390,7 @@ export default {
      type: String,
      required: false,
      default: 'posts',
-      validator: function(value) {
+      validator: function (value) {
        return ['posts', 'sheets', 'journals'].indexOf(value) !== -1
      }
    }
--- a/src/views/comment/components/TargetCommentTree.vue
+++ b/src/views/comment/components/TargetCommentTree.vue
@ -41,7 +41,7 @@
        </a-popconfirm>
      </template>
      <a slot="author" :href="comment.authorUrl" target="_blank">
-        <a-icon v-if="comment.isAdmin" style="margin-right: 3px;" type="user" />
+        <a-icon v-if="comment.isAdmin" style="margin-right: 3px" type="user" />
        {{ comment.author }}
      </a>
      <a-avatar slot="avatar" :alt="comment.author" :src="comment.avatar" size="large" />
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -222,7 +222,7 @@ export default {
      })
    }
  },
-  destroyed: function() {
+  destroyed: function () {
    if (this.logListDrawerVisible) {
      this.logListDrawerVisible = false
    }
--- a/src/views/dashboard/components/AnalysisCard.vue
+++ b/src/views/dashboard/components/AnalysisCard.vue
@ -49,7 +49,7 @@ export default {
    }
  },
  watch: {
-    number: function(newValue, oldValue) {
+    number: function (newValue, oldValue) {
      this.startNumber = oldValue
    }
  }
--- a/src/views/dashboard/components/RecentCommentTab.vue
+++ b/src/views/dashboard/components/RecentCommentTab.vue
@ -54,7 +54,7 @@ export default {
      type: String,
      required: false,
      default: 'posts',
-      validator: function(value) {
+      validator: function (value) {
        return ['posts', 'sheets', 'journals'].indexOf(value) !== -1
      }
    }
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@ -49,16 +49,12 @@
                <a-form-model-item prop="team">
                  <a-input v-model="teams.form.model.team" autoFocus />
                </a-form-model-item>
-                <a-form-model-item style="margin-bottom:0">
-                  <a-button type="primary" @click="handleCreateTeam">
-                    新增
-                  </a-button>
+                <a-form-model-item style="margin-bottom: 0">
+                  <a-button type="primary" @click="handleCreateTeam"> 新增 </a-button>
                </a-form-model-item>
              </a-form-model>
            </template>
-            <a-button block class="mt-3" type="primary">
-              新增分组
-            </a-button>
+            <a-button block class="mt-3" type="primary"> 新增分组 </a-button>
          </a-popover>
        </a-card>
      </a-col>
@ -88,20 +84,12 @@
                @callback="formBatch.errored = false"
                @click="handleUpdateBatch"
              ></ReactiveButton>
-              <a-button v-if="!form.visible" ghost type="primary" @click="handleOpenCreateMenuForm()">
-                新增
-              </a-button>
-              <a-button v-else type="default" @click="handleCloseCreateMenuForm()">
-                取消新增
-              </a-button>
+              <a-button v-if="!form.visible" ghost type="primary" @click="handleOpenCreateMenuForm()"> 新增 </a-button>
+              <a-button v-else type="default" @click="handleCloseCreateMenuForm()"> 取消新增 </a-button>
              <a-dropdown :trigger="['click']">
                <a-menu slot="overlay">
-                  <a-menu-item @click="menuInternalLinkSelector.visible = true">
-                    从系统预设链接添加
-                  </a-menu-item>
-                  <a-menu-item @click="handleDeleteBatch">
-                    删除当前组
-                  </a-menu-item>
+                  <a-menu-item @click="menuInternalLinkSelector.visible = true"> 从系统预设链接添加 </a-menu-item>
+                  <a-menu-item @click="handleDeleteBatch"> 删除当前组 </a-menu-item>
                </a-menu>
                <a-button>
                  其他
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -1,12 +1,8 @@
 <template>
  <page-view :title="activatedTheme ? activatedTheme.name : '无'" affix subTitle="当前启用">
    <template slot="extra">
-      <a-button :loading="list.loading" icon="reload" @click="handleRefreshThemesCache">
-        刷新
-      </a-button>
-      <a-button icon="plus" type="primary" @click="installModal.visible = true">
-        安装
-      </a-button>
+      <a-button :loading="list.loading" icon="reload" @click="handleRefreshThemesCache"> 刷新</a-button>
+      <a-button icon="plus" type="primary" @click="installModal.visible = true"> 安装</a-button>
    </template>
    <a-row :gutter="12" align="middle" type="flex">
      <a-col :span="24">
@ -20,35 +16,35 @@
              <div class="theme-screenshot">
                <img :alt="item.name" :src="item.screenshots || '/images/placeholder.jpg'" loading="lazy" />
              </div>
-              <template slot="actions" class="ant-card-actions">
+              <template slot="actions">
                <div v-if="item.activated">
-                  <a-icon style="margin-right:3px" theme="twoTone" type="unlock" />
+                  <a-icon style="margin-right: 3px" theme="twoTone" type="unlock" />
                  已启用
                </div>
                <div v-else @click="handleActiveTheme(item)">
-                  <a-icon style="margin-right:3px" type="lock" />
+                  <a-icon style="margin-right: 3px" type="lock" />
                  启用
                </div>
                <div @click="handleRouteToThemeSetting(item)">
-                  <a-icon style="margin-right:3px" type="setting" />
+                  <a-icon style="margin-right: 3px" type="setting" />
                  设置
                </div>
                <a-dropdown :trigger="['click']" placement="topCenter">
                  <a class="ant-dropdown-link" href="#">
-                    <a-icon style="margin-right:3px" type="ellipsis" />
+                    <a-icon style="margin-right: 3px" type="ellipsis" />
                    更多
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item :key="1" :disabled="item.activated" @click="handleOpenThemeDeleteModal(item)">
-                      <a-icon style="margin-right:3px" type="delete" />
+                      <a-icon style="margin-right: 3px" type="delete" />
                      删除
                    </a-menu-item>
                    <a-menu-item v-if="item.repo" :key="2" @click="handleConfirmRemoteUpdate(item)">
-                      <a-icon style="margin-right:3px" type="cloud" />
+                      <a-icon style="margin-right: 3px" type="cloud" />
                      在线更新
                    </a-menu-item>
                    <a-menu-item :key="3" @click="handleOpenLocalUpdateModal(item)">
-                      <a-icon style="margin-right:3px" type="file" />
+                      <a-icon style="margin-right: 3px" type="file" />
                      本地更新
                    </a-menu-item>
                  </a-menu>
--- a/src/views/interface/ThemeSetting.vue
+++ b/src/views/interface/ThemeSetting.vue
@ -111,7 +111,7 @@
                  :defaultValue="item.defaultValue"
                  model="hex"
                  picker="square"
-                  style="display: inline-block;height: 24px;"
+                  style="display: inline-block; height: 24px"
                ></verte>
                <AttachmentInput
                  v-else-if="item.type === 'ATTACHMENT'"
@ -123,7 +123,7 @@
                  v-else-if="item.type === 'NUMBER'"
                  v-model="theme.settings[item.name]"
                  :defaultValue="item.defaultValue"
-                  style="width:100%"
+                  style="width: 100%"
                />
                <a-switch
                  v-else-if="item.type === 'SWITCH'"
--- a/src/views/interface/components/MenuInternalLinkSelector.vue
+++ b/src/views/interface/components/MenuInternalLinkSelector.vue
@ -1,9 +1,7 @@
 <template>
  <a-modal v-model="visible" :bodyStyle="{ padding: '0 24px 24px' }" :width="1024" title="从系统预设链接添加菜单">
    <template slot="footer">
-      <a-button @click="handleCancel">
-        取消
-      </a-button>
+      <a-button @click="handleCancel"> 取消 </a-button>
      <ReactiveButton
        :disabled="menus && menus.length <= 0"
        :errored="saveErrored"
--- a/src/views/interface/components/MenuTreeNode.vue
+++ b/src/views/interface/components/MenuTreeNode.vue
@ -28,12 +28,8 @@
              </span>
            </a-list-item-meta>
            <template slot="actions">
-              <a v-if="!item.formVisible" href="javascript:void(0);" @click="handleOpenEditForm(item)">
-                编辑
-              </a>
-              <a v-else href="javascript:void(0);" @click="handleCloseCreateMenuForm(item)">
-                取消编辑
-              </a>
+              <a v-if="!item.formVisible" href="javascript:void(0);" @click="handleOpenEditForm(item)"> 编辑 </a>
+              <a v-else href="javascript:void(0);" @click="handleCloseCreateMenuForm(item)"> 取消编辑 </a>
            </template>
            <template slot="actions">
              <a href="javascript:void(0);" @click="handleDelete(item.id)">删除</a>
@ -65,7 +61,7 @@
            @cancel="handleCloseCreateMenuForm(item)"
            @succeed="handleUpdateMenuSucceed(item)"
          />
-          <div class="a-list-nested" style="margin-left: 44px;">
+          <div class="a-list-nested" style="margin-left: 44px">
            <MenuTreeNode :excludedTeams="excludedTeams" :list="item.children" @reload="onReloadEmit" />
          </div>
        </div>
--- a/src/views/interface/components/ThemeDeleteConfirmModal.vue
+++ b/src/views/interface/components/ThemeDeleteConfirmModal.vue
@ -1,9 +1,7 @@
 <template>
  <a-modal v-model="modalVisible" :afterClose="onAfterClose" :closable="false" :width="416" destroyOnClose title="提示">
    <template slot="footer">
-      <a-button @click="modalVisible = false">
-        取消
-      </a-button>
+      <a-button @click="modalVisible = false"> 取消 </a-button>
      <ReactiveButton
        :errored="deleteErrored"
        :loading="deleting"
@ -15,9 +13,7 @@
      ></ReactiveButton>
    </template>
    <p>确定删除【{{ theme.name }}】主题？</p>
-    <a-checkbox v-model="deleteSettings">
-      同时删除主题配置
-    </a-checkbox>
+    <a-checkbox v-model="deleteSettings"> 同时删除主题配置 </a-checkbox>
  </a-modal>
 </template>
 <script>
--- a/src/views/interface/components/ThemeFile.vue
+++ b/src/views/interface/components/ThemeFile.vue
@ -36,7 +36,7 @@ export default {
          isLeaf: file.isFile
        },
        nativeOn: {
-          click: function() {
+          click: function () {
            _this.handleSelectFile(file)
          }
        }
--- a/src/views/interface/components/ThemeSettingDrawer.vue
+++ b/src/views/interface/components/ThemeSettingDrawer.vue
@ -22,7 +22,7 @@
          </a-card-meta>
        </a-card>
      </a-col>
-      <a-col :lg="formColValue" :md="formColValue" :sm="24" :xl="formColValue" :xs="24" style="padding-bottom: 50px;">
+      <a-col :lg="formColValue" :md="formColValue" :sm="24" :xl="formColValue" :xs="24" style="padding-bottom: 50px">
        <a-spin :spinning="settingLoading">
          <div v-if="themeConfigurations.length > 0" class="card-container">
            <a-tabs defaultActiveKey="0" type="card">
@ -68,7 +68,7 @@
                      :defaultValue="item.defaultValue"
                      model="hex"
                      picker="square"
-                      style="display: inline-block;height: 24px;"
+                      style="display: inline-block; height: 24px"
                    ></verte>
                    <a-input
                      v-else-if="item.type === 'ATTACHMENT'"
@ -83,7 +83,7 @@
                      v-else-if="item.type === 'NUMBER'"
                      v-model="themeSettings[item.name]"
                      :defaultValue="item.defaultValue"
-                      style="width:100%"
+                      style="width: 100%"
                    />
                    <a-switch
                      v-else-if="item.type === 'SWITCH'"
@ -105,7 +105,7 @@
        </a-spin>
      </a-col>

-      <a-col v-if="viewMode" :lg="20" :md="20" :sm="24" :xl="20" :xs="24" style="padding-bottom: 50px;">
+      <a-col v-if="viewMode" :lg="20" :md="20" :sm="24" :xl="20" :xs="24" style="padding-bottom: 50px">
        <a-card :bodyStyle="{ padding: 0 }" :bordered="true">
          <iframe
            id="themeViewIframe"
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@ -95,7 +95,13 @@
                </template>
                <span
                  slot="title"
-                  style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                  style="
+                    max-width: 300px;
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
                >
                  {{ item.name }}{{ item.password ? '（加密）' : '' }}
                </span></a-list-item-meta
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@ -112,7 +112,7 @@ export default {
    }
  },
  mounted() {
-    window.onbeforeunload = function(e) {
+    window.onbeforeunload = function (e) {
      e = e || window.event
      if (e) {
        e.returnValue = '当前页面数据未保存，确定要离开吗？'
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@ -156,11 +156,11 @@
              </template>
              <span
                slot="title"
-                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
              >
                <a-icon
                  v-if="item.topPriority !== 0"
-                  style="margin-right: 3px;"
+                  style="margin-right: 3px"
                  theme="twoTone"
                  twoToneColor="red"
                  type="pushpin"
@ -226,7 +226,7 @@
          <span slot="postTitle" slot-scope="text, record">
            <a-icon
              v-if="record.topPriority !== 0"
-              style="margin-right: 3px;"
+              style="margin-right: 3px"
              theme="twoTone"
              twoToneColor="red"
              type="pushpin"
@ -260,7 +260,7 @@
              v-for="(category, index) in categoriesOfPost"
              :key="index"
              color="blue"
-              style="margin-bottom: 8px;cursor:pointer"
+              style="margin-bottom: 8px; cursor: pointer"
              @click="handleSelectCategory(category)"
            >
              {{ category.name }}
@ -276,7 +276,7 @@
          <span
            slot="commentCount"
            slot-scope="text, record"
-            style="cursor: pointer;"
+            style="cursor: pointer"
            @click="handleShowPostComments(record)"
          >
            <a-badge
@ -373,12 +373,8 @@
      @onClose="selectedPost = {}"
    >
      <template #extraFooter>
-        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious">
-          上一篇
-        </a-button>
-        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext">
-          下一篇
-        </a-button>
+        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious"> 上一篇 </a-button>
+        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext"> 下一篇 </a-button>
      </template>
    </PostSettingModal>

@ -560,7 +556,7 @@ export default {
  watch: {
    'list.params': {
      deep: true,
-      handler: function(newVal) {
+      handler: function (newVal) {
        if (newVal) {
          const params = JSON.parse(JSON.stringify(this.list.params))
          const path = this.$router.history.current.path
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@ -66,7 +66,7 @@
              <template slot="title">
                <span>{{ tag.postCount }} 篇文章</span>
              </template>
-              <post-tag :tag="tag" style="margin-bottom: 8px;cursor:pointer;" @click.native="form.model = tag" />
+              <post-tag :tag="tag" style="margin-bottom: 8px; cursor: pointer" @click.native="form.model = tag" />
            </a-tooltip>
          </a-spin>
        </a-card>
--- a/src/views/post/components/PostSettingModal.vue
+++ b/src/views/post/components/PostSettingModal.vue
@ -122,9 +122,7 @@
    </div>
    <template slot="footer">
      <slot name="extraFooter" />
-      <a-button :disabled="loading" @click="modalVisible = false">
-        关闭
-      </a-button>
+      <a-button :disabled="loading" @click="modalVisible = false"> 关闭 </a-button>
      <ReactiveButton
        v-if="!form.model.id"
        :errored="form.draftSaveErrored"
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@ -84,7 +84,7 @@ export default {
      }
    })
  },
-  destroyed: function() {
+  destroyed: function () {
    if (this.sheetSettingVisible) {
      this.sheetSettingVisible = false
    }
@ -118,7 +118,7 @@ export default {
    }
  },
  mounted() {
-    window.onbeforeunload = function(e) {
+    window.onbeforeunload = function (e) {
      e = e || window.event
      if (e) {
        e.returnValue = '当前页面数据未保存，确定要离开吗？'
--- a/src/views/sheet/components/CustomSheetList.vue
+++ b/src/views/sheet/components/CustomSheetList.vue
@ -74,7 +74,7 @@
          </template>
          <span
            slot="title"
-            style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+            style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
          >
            <a v-if="item.status === 'PUBLISHED'" :href="item.fullPath" class="no-underline" target="_blank">
              <a-tooltip :title="'点击访问【' + item.title + '】'" placement="top">{{ item.title }}</a-tooltip>
@ -218,12 +218,8 @@
      @onClose="selectedSheet = {}"
    >
      <template #extraFooter>
-        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious">
-          上一篇
-        </a-button>
-        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext">
-          下一篇
-        </a-button>
+        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious"> 上一篇 </a-button>
+        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext"> 下一篇 </a-button>
      </template>
    </SheetSettingModal>
    <TargetCommentDrawer
--- a/src/views/sheet/components/IndependentSheetList.vue
+++ b/src/views/sheet/components/IndependentSheetList.vue
@ -29,7 +29,7 @@
        <a-list-item-meta>
          <span
            slot="title"
-            style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+            style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
          >
            <a v-if="item.available" :href="item.fullPath" target="_blank">{{ item.title }}</a>
            <a v-else :href="item.fullPath" disabled target="_blank">{{ item.title }}</a>
--- a/src/views/sheet/components/SheetSettingModal.vue
+++ b/src/views/sheet/components/SheetSettingModal.vue
@ -110,9 +110,7 @@
    </div>
    <template slot="footer">
      <slot name="extraFooter" />
-      <a-button :disabled="loading" @click="modalVisible = false">
-        关闭
-      </a-button>
+      <a-button :disabled="loading" @click="modalVisible = false"> 关闭 </a-button>
      <ReactiveButton
        v-if="!form.model.id"
        :errored="form.draftSaveErrored"
--- a/src/views/sheet/independent/JournalList.vue
+++ b/src/views/sheet/independent/JournalList.vue
@ -103,7 +103,7 @@
      </a-col>
    </a-row>

-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button
        icon="setting"
        shape="circle"
@ -121,7 +121,7 @@
          <a-input v-model="optionModal.options.journals_title" />
        </a-form-item>
        <a-form-item label="每页显示条数：">
-          <a-input-number v-model="optionModal.options.journals_page_size" style="width:100%" />
+          <a-input-number v-model="optionModal.options.journals_page_size" style="width: 100%" />
        </a-form-item>
      </a-form>
    </a-modal>
--- a/src/views/sheet/independent/LinkList.vue
+++ b/src/views/sheet/independent/LinkList.vue
@ -17,7 +17,7 @@
              <a-auto-complete v-model="form.model.team" :dataSource="computedTeams" allowClear />
            </a-form-model-item>
            <a-form-model-item label="排序编号：" prop="priority">
-              <a-input-number v-model="form.model.priority" :min="0" style="width:100%" />
+              <a-input-number v-model="form.model.priority" :min="0" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="描述：" prop="description">
              <a-input v-model="form.model.description" :autoSize="{ minRows: 5 }" type="textarea" />
@ -95,7 +95,13 @@
                </template>
                <span
                  slot="title"
-                  style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                  style="
+                    max-width: 300px;
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
                >
                  {{ item.name }}
                </span>
@ -132,7 +138,7 @@
        </a-card>
      </a-col>
    </a-row>
-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button
        icon="setting"
        shape="circle"
--- a/src/views/sheet/independent/PhotoList.vue
+++ b/src/views/sheet/independent/PhotoList.vue
@ -67,7 +67,7 @@
        @showSizeChange="handlePaginationChange"
      />
    </div>
-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button icon="setting" shape="circle" size="large" type="primary" @click="optionFormVisible = true"></a-button>
    </div>
    <a-modal v-model="optionFormVisible" :afterClose="() => (optionFormVisible = false)" title="页面设置">
@ -79,7 +79,7 @@
          <a-input v-model="options.photos_title" />
        </a-form-item>
        <a-form-item label="每页显示条数：">
-          <a-input-number v-model="options.photos_page_size" style="width:100%" />
+          <a-input-number v-model="options.photos_page_size" style="width: 100%" />
        </a-form-item>
      </a-form>
    </a-modal>
@ -97,7 +97,7 @@
            <img
              :src="form.model.url || '/images/placeholder.jpg'"
              class="w-full cursor-pointer"
-              style="border-radius:4px"
+              style="border-radius: 4px"
              @click="attachmentSelectDrawer.visible = true"
            />
          </div>
@ -114,7 +114,7 @@
            :defaultValue="takeTimeDefaultValue"
            format="YYYY-MM-DD HH:mm:ss"
            showTime
-            style="width:100%"
+            style="width: 100%"
            @change="onTakeTimeChange"
            @ok="onTakeTimeSelect"
          />
@ -123,7 +123,7 @@
          <a-input v-model="form.model.location" />
        </a-form-model-item>
        <a-form-model-item label="分组：" prop="team">
-          <a-auto-complete v-model="form.model.team" :dataSource="computedTeams" allowClear style="width:100%" />
+          <a-auto-complete v-model="form.model.team" :dataSource="computedTeams" allowClear style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="描述：" prop="description">
          <a-input v-model="form.model.description" :autoSize="{ minRows: 5 }" type="textarea" />
--- a/src/views/system/About.vue
+++ b/src/views/system/About.vue
@ -189,7 +189,7 @@ User Agent：${navigator.userAgent}`
        .then(response => {
          _this.contributors = response.data
        })
-        .catch(function(error) {
+        .catch(function (error) {
          _this.$log.error('Fetch contributors error', error)
        })
        .finally(() => {
@ -236,7 +236,7 @@ User Agent：${navigator.userAgent}`
            }
          })
        })
-        .catch(function(error) {
+        .catch(function (error) {
          this.$log.error('Check update fail', error)
        })
        .finally(() => {
--- a/src/views/system/Installation.vue
+++ b/src/views/system/Installation.vue
@ -2,7 +2,7 @@
  <a-row align="middle" class="h-screen" justify="center" type="flex">
    <a-col :lg="16" :md="20" :sm="20" :xl="12" :xs="23" :xxl="8">
      <div class="card-container animated fadeIn">
-        <a-card :bordered="false" style="box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;">
+        <a-card :bordered="false" style="box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0">
          <div class="halo-logo">
            <img alt="Halo Logo" src="/images/logo.svg" />
            <span>安装向导</span>
@ -11,12 +11,8 @@
          <!-- Blogger info -->
          <div class="mt-5 mb-5">
            <a-radio-group v-model="installationMode">
-              <a-radio-button value="new">
-                全新安装
-              </a-radio-button>
-              <a-radio-button value="import">
-                数据导入
-              </a-radio-button>
+              <a-radio-button value="new"> 全新安装 </a-radio-button>
+              <a-radio-button value="import"> 数据导入 </a-radio-button>
            </a-radio-group>
          </div>
          <a-form-model
@ -27,45 +23,41 @@
            class="installationForm animated fadeIn"
            layout="horizontal"
          >
-            <a-divider dashed orientation="left">
-              管理员信息
-            </a-divider>
+            <a-divider dashed orientation="left"> 管理员信息 </a-divider>
            <a-form-model-item prop="username">
              <a-input v-model="form.model.username" placeholder="用户名">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="username">
              <a-input v-model="form.model.nickname" placeholder="用户昵称">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="email">
              <a-input v-model="form.model.email" placeholder="用户邮箱">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="mail" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="mail" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <a-input v-model="form.model.password" placeholder="登录密码（8-100位）" type="password">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="confirmPassword">
              <a-input v-model="form.model.confirmPassword" placeholder="确认登录密码" type="password">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
              </a-input>
            </a-form-model-item>
-            <a-divider dashed orientation="left">
-              站点信息
-            </a-divider>
+            <a-divider dashed orientation="left"> 站点信息 </a-divider>
            <a-form-model-item prop="url">
              <a-input v-model="form.model.url" placeholder="博客地址">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="link" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="link" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="title">
              <a-input v-model="form.model.title" placeholder="博客标题">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="book" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="book" />
              </a-input>
            </a-form-model-item>
          </a-form-model>
--- a/src/views/system/SystemOptions.vue
+++ b/src/views/system/SystemOptions.vue
@ -1,7 +1,7 @@
 <template>
  <page-view :title="title">
    <template slot="extra">
-      <a-button style="padding:0" type="link" @click="advancedOptions = !advancedOptions">
+      <a-button style="padding: 0" type="link" @click="advancedOptions = !advancedOptions">
        切换到{{ advancedOptions ? '基础选项' : '高级选项' }}
      </a-button>
    </template>
--- a/src/views/system/ToolList.vue
+++ b/src/views/system/ToolList.vue
@ -7,7 +7,7 @@
            <a-icon type="experiment" />
            开发者选项
          </div>
-          <p style="min-height: 50px;">点击进入开发者选项页面</p>
+          <p style="min-height: 50px">点击进入开发者选项页面</p>
          <a-button class="float-right" type="primary" @click="handleToDeveloperOptions()">进入</a-button>
        </a-card>
      </a-col>
@ -17,19 +17,13 @@
            <a-icon type="hdd" />
            博客备份
          </div>
-          <p style="min-height: 50px;">支持备份全站数据和数据导出，支持下载到本地</p>
+          <p style="min-height: 50px">支持备份全站数据和数据导出，支持下载到本地</p>

          <a-dropdown class="float-right">
            <a-menu slot="overlay">
-              <a-menu-item key="1" @click="backupWorkDirDrawerVisible = true">
-                整站备份
-              </a-menu-item>
-              <a-menu-item key="2" @click="exportDataDrawerVisible = true">
-                数据导出
-              </a-menu-item>
-              <a-menu-item key="3" @click="exportMarkdownDrawerVisible = true">
-                导出文章为 Markdown 文档
-              </a-menu-item>
+              <a-menu-item key="1" @click="backupWorkDirDrawerVisible = true"> 整站备份 </a-menu-item>
+              <a-menu-item key="2" @click="exportDataDrawerVisible = true"> 数据导出 </a-menu-item>
+              <a-menu-item key="3" @click="exportMarkdownDrawerVisible = true"> 导出文章为 Markdown 文档 </a-menu-item>
            </a-menu>
            <a-button class="ml-2">
              备份
@ -44,7 +38,7 @@
            <a-icon type="file-markdown" />
            Markdown 文章导入
          </div>
-          <p style="min-height: 50px;">支持 Hexo/Jekyll 文章导入并解析元数据</p>
+          <p style="min-height: 50px">支持 Hexo/Jekyll 文章导入并解析元数据</p>
          <a-button class="float-right" type="primary" @click="markdownUpload = true">导入</a-button>
        </a-card>
      </a-col>
--- a/src/views/system/developer/tabs/Environment.vue
+++ b/src/views/system/developer/tabs/Environment.vue
@ -133,7 +133,7 @@
        </a-card>
      </a-col>
    </a-row>
-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button icon="sync" shape="circle" size="large" type="primary" @click="handleRefresh"></a-button>
    </div>
  </div>
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@ -3,12 +3,8 @@
    <a-card :bodyStyle="{ padding: 0 }" :bordered="false">
      <div class="table-operator">
        <a-button icon="cloud-upload" type="primary" @click="uploadModal.visible = true">上传</a-button>
-        <a-button icon="plus" @click="handleOpenCreateDirectoryModal({})">
-          新建文件夹
-        </a-button>
-        <a-button :loading="list.loading" icon="sync" @click="handleListStatics">
-          刷新
-        </a-button>
+        <a-button icon="plus" @click="handleOpenCreateDirectoryModal({})"> 新建文件夹</a-button>
+        <a-button :loading="list.loading" icon="sync" @click="handleListStatics"> 刷新</a-button>
      </div>
      <div class="mt-4">
        <a-table
@ -235,7 +231,7 @@ export default {
    ...mapGetters(['options']),
    sortedStatics() {
      const data = this.list.data.slice(0)
-      return data.sort(function(a, b) {
+      return data.sort(function (a, b) {
        return a.isFile - b.isFile
      })
    }
--- a/src/views/system/optiontabs/AttachmentTab.vue
+++ b/src/views/system/optiontabs/AttachmentTab.vue
@ -11,10 +11,10 @@
        <a-switch v-model="options.attachment_upload_image_preview_enable" />
      </a-form-model-item>
      <a-form-model-item label="最大上传文件数：">
-        <a-input-number v-model="options.attachment_upload_max_files" :min="1" style="width:100%" />
+        <a-input-number v-model="options.attachment_upload_max_files" :min="1" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="同时上传文件数：">
-        <a-input-number v-model="options.attachment_upload_max_parallel_uploads" :min="1" style="width:100%" />
+        <a-input-number v-model="options.attachment_upload_max_parallel_uploads" :min="1" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="存储位置：">
        <a-select v-model="options.attachment_type">
--- a/src/views/system/optiontabs/CommentTab.vue
+++ b/src/views/system/optiontabs/CommentTab.vue
@ -33,7 +33,7 @@
        <a-input v-model="options.gravatar_source" />
      </a-form-model-item>
      <a-form-model-item label="每页显示条数： ">
-        <a-input-number v-model="options.comment_page_size" :min="1" style="width:100%" />
+        <a-input-number v-model="options.comment_page_size" :min="1" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="占位提示：">
        <a-input v-model="options.comment_content_placeholder" />
--- a/src/views/system/optiontabs/PostTab.vue
+++ b/src/views/system/optiontabs/PostTab.vue
@ -15,10 +15,10 @@
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="首页每页文章条数：">
-        <a-input-number v-model="options.post_index_page_size" :min="1" style="width:100%" />
+        <a-input-number v-model="options.post_index_page_size" :min="1" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item help="* 包括标签所属文章页面、分类所属文章页面" label="归档页面每页文章条数：">
-        <a-input-number v-model="options.post_archives_page_size" :min="1" style="width:100%" />
+        <a-input-number v-model="options.post_archives_page_size" :min="1" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="RSS 内容类型：">
        <a-select v-model="options.rss_content_type">
@ -27,10 +27,10 @@
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="RSS 内容条数：">
-        <a-input-number v-model="options.rss_page_size" :min="1" style="width:100%" />
+        <a-input-number v-model="options.rss_page_size" :min="1" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="文章摘要字数：">
-        <a-input-number v-model="options.post_summary_length" style="width:100%" />
+        <a-input-number v-model="options.post_summary_length" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="自动清理回收站文章：">
        <a-switch v-model="options.recycled_post_cleaning_enabled" />
--- a/src/views/user/Profile.vue
+++ b/src/views/user/Profile.vue
@ -12,7 +12,7 @@
                @click="attachmentDrawer.visible = true"
              />
            </a-tooltip>
-            <div class="mt-4 mb-1 text-xl font-medium leading-5" style="color: rgba(0, 0, 0, 0.85);">
+            <div class="mt-4 mb-1 text-xl font-medium leading-5" style="color: rgba(0, 0, 0, 0.85)">
              {{ userForm.model.nickname }}
            </div>
            <div>{{ userForm.model.description }}</div>
@ -216,9 +216,7 @@
      icon="safety-certificate"
    >
      <template slot="footer">
-        <a-button key="back" @click="handleCloseMFAuthModal">
-          取消
-        </a-button>
+        <a-button key="back" @click="handleCloseMFAuthModal"> 取消 </a-button>
        <ReactiveButton
          key="submit"
          :errored="mfaParam.errored"
@ -234,7 +232,7 @@
      <a-form-model ref="mfaForm" :model="mfaParam" :rules="mfaParam.rules" layout="vertical">
        <a-form-model-item v-if="mfaUsed" label="两步验证码" prop="authcode">
          <a-input v-model="mfaParam.authcode" :maxLength="6">
-            <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
+            <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="safety-certificate" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item v-if="!mfaUsed" :help="`MFAKey:${mfaParam.mfaKey}`" label="1. 请扫描二维码或导入 key">
@ -247,7 +245,7 @@
        </a-form-model-item>
        <a-form-model-item v-if="!mfaUsed" label="2. 验证两步验证码" prop="authcode">
          <a-input v-model="mfaParam.authcode" :maxLength="6">
-            <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
+            <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="safety-certificate" />
          </a-input>
        </a-form-model-item>
      </a-form-model>
--- a/src/views/user/ResetPassword.vue
+++ b/src/views/user/ResetPassword.vue
@ -43,9 +43,7 @@
          <a-button :block="true" type="primary" @click="handleResetPassword">重置密码</a-button>
        </a-form-model-item>
      </a-form-model>
-      <router-link :to="{ name: 'Login' }" class="tip">
-        返回登录
-      </router-link>
+      <router-link :to="{ name: 'Login' }" class="tip"> 返回登录 </router-link>
    </div>
  </div>
 </template>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -131,24 +131,24 @@ module.exports = {
    },
    spacing: {
      px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '20': '5rem',
-      '24': '6rem',
-      '32': '8rem',
-      '40': '10rem',
-      '48': '12rem',
-      '56': '14rem',
-      '64': '16rem'
+      0: '0',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      8: '2rem',
+      10: '2.5rem',
+      12: '3rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      32: '8rem',
+      40: '10rem',
+      48: '12rem',
+      56: '14rem',
+      64: '16rem'
    },
    backgroundColor: theme => theme('colors'),
    backgroundImage: {
@ -195,10 +195,10 @@ module.exports = {
    },
    borderWidth: {
      default: '1px',
-      '0': '0',
-      '2': '2px',
-      '4': '4px',
-      '8': '8px'
+      0: '0',
+      2: '2px',
+      4: '4px',
+      8: '8px'
    },
    boxShadow: {
      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
@ -229,17 +229,17 @@ module.exports = {
      current: 'currentColor'
    },
    flex: {
-      '1': '1 1 0%',
+      1: '1 1 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      none: 'none'
    },
    flexGrow: {
-      '0': '0',
+      0: '0',
      default: '1'
    },
    flexShrink: {
-      '0': '0',
+      0: '0',
      default: '1'
    },
    fontFamily: {
@ -291,7 +291,7 @@ module.exports = {
      screen: '100vh'
    }),
    inset: {
-      '0': '0',
+      0: '0',
      auto: 'auto'
    },
    letterSpacing: {
@ -309,14 +309,14 @@ module.exports = {
      normal: '1.5',
      relaxed: '1.625',
      loose: '2',
-      '3': '.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '7': '1.75rem',
-      '8': '2rem',
-      '9': '2.25rem',
-      '10': '2.5rem'
+      3: '.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem'
    },
    listStyleType: {
      none: 'none',
@ -348,12 +348,12 @@ module.exports = {
      ...breakpoints(theme('screens'))
    }),
    minHeight: {
-      '0': '0',
+      0: '0',
      full: '100%',
      screen: '100vh'
    },
    minWidth: {
-      '0': '0',
+      0: '0',
      full: '100%'
    },
    objectPosition: {
@ -368,28 +368,28 @@ module.exports = {
      top: 'top'
    },
    opacity: {
-      '0': '0',
-      '25': '0.25',
-      '50': '0.5',
-      '75': '0.75',
-      '100': '1'
+      0: '0',
+      25: '0.25',
+      50: '0.5',
+      75: '0.75',
+      100: '1'
    },
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12'
    },
    padding: theme => theme('spacing'),
    placeholderColor: theme => theme('colors'),
@ -402,9 +402,9 @@ module.exports = {
      current: 'currentColor'
    },
    strokeWidth: {
-      '0': '0',
-      '1': '1',
-      '2': '2'
+      0: '0',
+      1: '1',
+      2: '2'
    },
    textColor: theme => theme('colors'),
    textOpacity: theme => theme('opacity'),
@ -442,28 +442,28 @@ module.exports = {
    }),
    zIndex: {
      auto: 'auto',
-      '0': '0',
-      '10': '10',
-      '20': '20',
-      '30': '30',
-      '40': '40',
-      '50': '50'
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40',
+      50: '50'
    },
    gap: theme => theme('spacing'),
    gridTemplateColumns: {
      none: 'none',
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))',
-      '7': 'repeat(7, minmax(0, 1fr))',
-      '8': 'repeat(8, minmax(0, 1fr))',
-      '9': 'repeat(9, minmax(0, 1fr))',
-      '10': 'repeat(10, minmax(0, 1fr))',
-      '11': 'repeat(11, minmax(0, 1fr))',
-      '12': 'repeat(12, minmax(0, 1fr))'
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))'
    },
    gridColumn: {
      auto: 'auto',
@ -482,44 +482,44 @@ module.exports = {
    },
    gridColumnStart: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-      '13': '13'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13'
    },
    gridColumnEnd: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-      '13': '13'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13'
    },
    gridTemplateRows: {
      none: 'none',
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))'
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))'
    },
    gridRow: {
      auto: 'auto',
@ -532,23 +532,23 @@ module.exports = {
    },
    gridRowStart: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7'
    },
    gridRowEnd: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7'
    },
    transformOrigin: {
      center: 'center',
@ -562,25 +562,25 @@ module.exports = {
      'top-left': 'top left'
    },
    scale: {
-      '0': '0',
-      '50': '.5',
-      '75': '.75',
-      '90': '.9',
-      '95': '.95',
-      '100': '1',
-      '105': '1.05',
-      '110': '1.1',
-      '125': '1.25',
-      '150': '1.5'
+      0: '0',
+      50: '.5',
+      75: '.75',
+      90: '.9',
+      95: '.95',
+      100: '1',
+      105: '1.05',
+      110: '1.1',
+      125: '1.25',
+      150: '1.5'
    },
    rotate: {
      '-180': '-180deg',
      '-90': '-90deg',
      '-45': '-45deg',
-      '0': '0',
-      '45': '45deg',
-      '90': '90deg',
-      '180': '180deg'
+      0: '0',
+      45: '45deg',
+      90: '90deg',
+      180: '180deg'
    },
    translate: (theme, { negative }) => ({
      ...theme('spacing'),
@ -594,10 +594,10 @@ module.exports = {
      '-12': '-12deg',
      '-6': '-6deg',
      '-3': '-3deg',
-      '0': '0',
-      '3': '3deg',
-      '6': '6deg',
-      '12': '12deg'
+      0: '0',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg'
    },
    transitionProperty: {
      none: 'none',
@ -615,24 +615,24 @@ module.exports = {
      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
    },
    transitionDuration: {
-      '75': '75ms',
-      '100': '100ms',
-      '150': '150ms',
-      '200': '200ms',
-      '300': '300ms',
-      '500': '500ms',
-      '700': '700ms',
-      '1000': '1000ms'
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms'
    },
    transitionDelay: {
-      '75': '75ms',
-      '100': '100ms',
-      '150': '150ms',
-      '200': '200ms',
-      '300': '300ms',
-      '500': '500ms',
-      '700': '700ms',
-      '1000': '1000ms'
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms'
    },
    animation: {
      none: 'none',
--- a/vue.config.js
+++ b/vue.config.js
@ -1,6 +1,8 @@
 const pkg = require('./package.json')

-module.exports = {
+const { defineConfig } = require('@vue/cli-service')
+
+module.exports = defineConfig({
  publicPath: process.env.PUBLIC_PATH,

  chainWebpack: config => {
@ -24,4 +26,4 @@ module.exports = {
  lintOnSave: false,
  transpileDependencies: [],
  productionSourceMap: false
-}
+})