Created ThemeSetting component.

2019-08-27 22:48:56 +08:00 · 2019-08-27 22:48:56 +08:00 · 9c6175dfe8
parent c8b2c41382
commit 9c6175dfe8
14 changed files with 323 additions and 270 deletions
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@ -144,7 +144,7 @@
      </upload>
    </a-modal>
    <AttachmentDetailDrawer
-      v-model="drawerVisiable"
+      v-model="drawerVisible"
      v-if="selectAttachment"
      :attachment="selectAttachment"
      :addToPhoto="true"
@ -188,7 +188,7 @@ export default {
        attachmentType: null
      },
      uploadHandler: attachmentApi.upload,
-      drawerVisiable: false
+      drawerVisible: false
    }
  },
  computed: {
@ -222,7 +222,7 @@ export default {
    },
    handleShowDetailDrawer(attachment) {
      this.selectAttachment = attachment
-      this.drawerVisiable = true
+      this.drawerVisible = true
    },
    handlePaginationChange(page, size) {
      this.$log.debug(`Current: ${page}, PageSize: ${size}`)
--- a/src/views/attachment/components/AttachmentDetailDrawer.vue
+++ b/src/views/attachment/components/AttachmentDetailDrawer.vue
@ -3,7 +3,7 @@
    title="附件详情"
    :width="isMobile()?'100%':'460'"
    closable
-    :visible="visiable"
+    :visible="visible"
    destroyOnClose
    @close="onClose"
  >
@ -193,7 +193,7 @@ export default {
    }
  },
  model: {
-    prop: 'visiable',
+    prop: 'visible',
    event: 'close'
  },
  props: {
@ -206,7 +206,7 @@ export default {
      required: false,
      default: false
    },
-    visiable: {
+    visible: {
      type: Boolean,
      required: false,
      default: true
@ -221,7 +221,7 @@ export default {
    }
  },
  watch: {
-    visiable: function(newValue, oldValue) {
+    visible: function(newValue, oldValue) {
      this.$log.debug('old value', oldValue)
      this.$log.debug('new value', newValue)
      if (newValue) {
--- a/src/views/attachment/components/AttachmentDrawer.vue
+++ b/src/views/attachment/components/AttachmentDrawer.vue
@ -4,7 +4,7 @@
      title="附件库"
      :width="isMobile()?'100%':'460'"
      closable
-      :visible="visiable"
+      :visible="visible"
      destroyOnClose
      @close="onClose"
    >
@ -51,7 +51,7 @@
      </div>

      <AttachmentDetailDrawer
-        v-model="detailVisiable"
+        v-model="detailVisible"
        v-if="selectedAttachment"
        :attachment="selectedAttachment"
        @delete="handleDelete"
@ -98,11 +98,11 @@ export default {
    AttachmentDetailDrawer
  },
  model: {
-    prop: 'visiable',
+    prop: 'visible',
    event: 'close'
  },
  props: {
-    visiable: {
+    visible: {
      type: Boolean,
      required: false,
      default: false
@ -111,7 +111,7 @@ export default {
  data() {
    return {
      attachmentType: attachmentApi.type,
-      detailVisiable: false,
+      detailVisible: false,
      attachmentDrawerVisible: false,
      uploadVisible: false,
      skeletonLoading: true,
@ -144,7 +144,7 @@ export default {
    this.loadAttachments()
  },
  watch: {
-    visiable: function(newValue, oldValue) {
+    visible: function(newValue, oldValue) {
      if (newValue) {
        this.loadSkeleton()
      }
@ -163,7 +163,7 @@ export default {
    handleShowDetailDrawer(attachment) {
      this.selectedAttachment = attachment
      this.$log.debug('Show detail of', attachment)
-      this.detailVisiable = true
+      this.detailVisible = true
    },
    loadAttachments(isSearch) {
      this.queryParam.page = this.pagination.page - 1
--- a/src/views/attachment/components/AttachmentSelectDrawer.vue
+++ b/src/views/attachment/components/AttachmentSelectDrawer.vue
@ -4,7 +4,7 @@
      :title="title"
      :width="isMobile()?'100%':drawerWidth"
      closable
-      :visible="visiable"
+      :visible="visible"
      destroyOnClose
      @close="onClose"
    >
@ -91,11 +91,11 @@ export default {
  name: 'AttachmentSelectDrawer',
  mixins: [mixin, mixinDevice],
  model: {
-    prop: 'visiable',
+    prop: 'visible',
    event: 'close'
  },
  props: {
-    visiable: {
+    visible: {
      type: Boolean,
      required: false,
      default: false
@ -134,7 +134,7 @@ export default {
    this.loadAttachments()
  },
  watch: {
-    visiable: function(newValue, oldValue) {
+    visible: function(newValue, oldValue) {
      if (newValue) {
        this.loadSkeleton()
      }
--- a/src/views/comment/components/CommentDetail.vue
+++ b/src/views/comment/components/CommentDetail.vue
@ -3,7 +3,7 @@
    title="评论详情"
    :width="isMobile()?'100%':'460'"
    closable
-    :visible="visiable"
+    :visible="visible"
    destroyOnClose
    @close="onClose"
  >
@ -142,7 +142,7 @@ export default {
    }
  },
  model: {
-    prop: 'visiable',
+    prop: 'visible',
    event: 'close'
  },
  props: {
@ -150,7 +150,7 @@ export default {
      type: Object,
      required: true
    },
-    visiable: {
+    visible: {
      type: Boolean,
      required: false,
      default: true
@ -169,7 +169,7 @@ export default {
    this.loadOptions()
  },
  watch: {
-    visiable: function(newValue, oldValue) {
+    visible: function(newValue, oldValue) {
      this.$log.debug('old value', oldValue)
      this.$log.debug('new value', newValue)
      if (newValue) {
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -271,9 +271,9 @@
      title="操作日志"
      :width="isMobile()?'100%':'460'"
      closable
-      :visible="logDrawerVisiable"
+      :visible="logDrawerVisible"
      destroyOnClose
-      @close="()=>this.logDrawerVisiable = false"
+      @close="()=>this.logDrawerVisible = false"
    >
      <a-row
        type="flex"
@ -354,7 +354,7 @@ export default {
      writeLoading: true,
      logLoading: true,
      countsLoading: true,
-      logDrawerVisiable: false,
+      logDrawerVisible: false,
      postData: [],
      logData: [],
      countsData: {},
@ -476,7 +476,7 @@ export default {
      this.showMoreOptions = !this.showMoreOptions
    },
    handleShowLogDrawer() {
-      this.logDrawerVisiable = true
+      this.logDrawerVisible = true
      this.loadLogs()
    },
    loadLogs() {
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -47,7 +47,7 @@
                    style="margin-right:3px"
                  />启用
                </div>
-                <div @click="handleEditClick(item)">
+                <div @click="handleShowThemeSetting(item)">
                  <a-icon
                    type="setting"
                    style="margin-right:3px"
@ -123,171 +123,13 @@
        </a-list>
      </a-col>
    </a-row>
-    <a-drawer
-      v-if="themeProperty"
-      :title="themeProperty.name + ' 主题设置'"
-      width="100%"
-      closable
-      @close="onClose"
-      :visible="visible"
-      destroyOnClose
-    >
-      <a-row
-        :gutter="12"
-        type="flex"
-      >
-        <a-col
-          :xl="12"
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 10}"
-          >
-            <a-card :bordered="false">
-              <img
-                :alt="themeProperty.name"
-                :src="themeProperty.screenshots"
-                slot="cover"
-              >
-              <a-card-meta :description="themeProperty.description">
-                <template slot="title">
-                  <a
-                    :href="themeProperty.author.website"
-                    target="_blank"
-                  >{{ themeProperty.author.name }}</a>
-                </template>
-                <a-avatar
-                  v-if="themeProperty.logo"
-                  :src="themeProperty.logo"
-                  size="large"
-                  slot="avatar"
-                />
-                <a-avatar
-                  v-else
-                  size="large"
-                  slot="avatar"
-                >{{ themeProperty.author.name }}</a-avatar>
-              </a-card-meta>
-            </a-card>
-          </a-skeleton>
-        </a-col>
-        <a-col
-          :xl="12"
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-          style="padding-bottom: 50px;"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 20}"
-          >
-            <div class="card-container">
-              <a-tabs
-                type="card"
-                defaultActiveKey="0"
-                v-if="themeConfiguration.length>0"
-              >
-                <a-tab-pane
-                  v-for="(group, index) in themeConfiguration"
-                  :key="index.toString()"
-                  :tab="group.label"
-                >
-                  <a-form layout="vertical">
-                    <a-form-item
-                      v-for="(item, index1) in group.items"
-                      :label="item.label + '：'"
-                      :key="index1"
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input
-                        v-model="themeSettings[item.name]"
-                        :defaultValue="item.defaultValue"
-                        :placeholder="item.placeholder"
-                        v-if="item.type == 'TEXT'"
-                      />
-                      <a-input
-                        type="textarea"
-                        :autosize="{ minRows: 5 }"
-                        v-model="themeSettings[item.name]"
-                        :placeholder="item.placeholder"
-                        v-else-if="item.type == 'TEXTAREA'"
-                      />
-                      <a-radio-group
-                        v-decorator="['radio-group']"
-                        :defaultValue="item.defaultValue"
-                        v-model="themeSettings[item.name]"
-                        v-else-if="item.type == 'RADIO'"
-                      >
-                        <a-radio
-                          v-for="(option, index2) in item.options"
-                          :key="index2"
-                          :value="option.value"
-                        >{{ option.label }}</a-radio>
-                      </a-radio-group>
-                      <a-select
-                        v-model="themeSettings[item.name]"
-                        :defaultValue="item.defaultValue"
-                        v-else-if="item.type == 'SELECT'"
-                      >
-                        <a-select-option
-                          v-for="option in item.options"
-                          :key="option.value"
-                          :value="option.value"
-                        >{{ option.label }}</a-select-option>
-                      </a-select>
-                      <verte
-                        picker="square"
-                        model="hex"
-                        v-model="themeSettings[item.name]"
-                        :defaultValue="item.defaultValue"
-                        v-else-if="item.type == 'COLOR'"
-                        style="display: inline-block;height: 24px;"
-                      ></verte>
-                      <a-input
-                        v-model="themeSettings[item.name]"
-                        :defaultValue="item.defaultValue"
-                        :placeholder="item.placeholder"
-                        v-else
-                      />
-                    </a-form-item>
-                  </a-form>
-                </a-tab-pane>
-              </a-tabs>
-              <a-alert
-                message="当前主题暂无设置选项"
-                banner
-                v-else
-              />
-            </div>
-          </a-skeleton>
-        </a-col>
-      </a-row>

-      <footer-tool-bar
-        v-if="themeConfiguration.length>0"
-        :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
-      >
-        <a-button
-          type="primary"
-          @click="handleSaveSettings"
-        >保存</a-button>
-        <a-button
-          type="dashed"
-          @click="()=>this.attachmentDrawerVisible = true"
-          style="margin-left: 8px;"
-        >附件库</a-button>
-      </footer-tool-bar>
+    <ThemeSetting
+      :theme="selectedTheme"
+      v-model="themeSettingVisible"
+      @close="onThemeSettingsClose"
+    />

-      <AttachmentDrawer v-model="attachmentDrawerVisible" />
-    </a-drawer>
    <div class="upload-button">
      <a-dropdown
        placement="topLeft"
@ -401,39 +243,25 @@
 </template>

 <script>
-import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
-import FooterToolBar from '@/components/FooterToolbar'
-import { mixin, mixinDevice } from '@/utils/mixin.js'
+import ThemeSetting from './components/ThemeSetting'
 import themeApi from '@/api/theme'
 import Verte from 'verte'
 import 'verte/dist/verte.css'

 export default {
  components: {
-    AttachmentDrawer,
-    FooterToolBar,
+    ThemeSetting,
    Verte
  },
-  mixins: [mixin, mixinDevice],
  data() {
    return {
      themeLoading: false,
-      optionLoading: true,
      uploadThemeVisible: false,
      uploadNewThemeVisible: false,
      fetchButtonLoading: false,
-      wrapperCol: {
-        xl: { span: 12 },
-        lg: { span: 12 },
-        sm: { span: 24 },
-        xs: { span: 24 }
-      },
-      attachmentDrawerVisible: false,
      themes: [],
-      visible: false,
-      themeConfiguration: [],
-      themeSettings: [],
-      themeProperty: null,
+      themeSettingVisible: false,
+      selectedTheme: {},
      fetchingUrl: null,
      uploadHandler: themeApi.upload,
      updateByUploadHandler: themeApi.updateByUpload,
@ -451,17 +279,17 @@ export default {
  created() {
    this.loadThemes()
  },
-  destroyed: function() {
-    if (this.visible) {
-      this.visible = false
-    }
-  },
-  beforeRouteLeave(to, from, next) {
-    if (this.visible) {
-      this.visible = false
-    }
-    next()
-  },
+  // destroyed: function() {
+  //   if (this.visible) {
+  //     this.visible = false
+  //   }
+  // },
+  // beforeRouteLeave(to, from, next) {
+  //   if (this.visible) {
+  //     this.visible = false
+  //   }
+  //   next()
+  // },
  methods: {
    loadThemes() {
      this.themeLoading = true
@ -470,21 +298,7 @@ export default {
        this.themeLoading = false
      })
    },
-    settingDrawer(theme) {
-      this.visible = true
-      this.optionLoading = true
-      this.themeProperty = theme

-      themeApi.fetchConfiguration(theme.id).then(response => {
-        this.themeConfiguration = response.data.data
-        themeApi.fetchSettings(theme.id).then(response => {
-          this.themeSettings = response.data.data
-          setTimeout(() => {
-            this.optionLoading = false
-          }, 300)
-        })
-      })
-    },
    activeTheme(themeId) {
      themeApi.active(themeId).then(response => {
        this.$message.success('设置成功！')
@ -503,16 +317,9 @@ export default {
        this.loadThemes()
      })
    },
-    handleSaveSettings() {
-      themeApi.saveSettings(this.themeProperty.id, this.themeSettings).then(response => {
-        this.$message.success('保存成功！')
-      })
-    },
-    onClose() {
-      this.visible = false
-      this.optionLoading = false
-      this.themeConfiguration = []
-      this.themeProperty = null
+    onThemeSettingsClose() {
+      this.themeSettingVisible = false
+      this.selectedTheme = {}
    },
    handleUploadChange(info) {
      const status = info.file.status
@ -539,9 +346,6 @@ export default {
      }
      this.loadThemes()
    },
-    handleEllipsisClick(theme) {
-      this.$log.debug('Ellipsis clicked', theme)
-    },
    handleEditClick(theme) {
      this.settingDrawer(theme)
    },
@ -571,6 +375,10 @@ export default {
      console.log(item)
      this.prepareUpdateTheme = item
      this.uploadNewThemeVisible = true
+    },
+    handleShowThemeSetting(theme) {
+      this.selectedTheme = theme
+      this.themeSettingVisible = true
    }
  }
 }
--- a/src/views/interface/components/ThemeSetting.vue
+++ b/src/views/interface/components/ThemeSetting.vue
@ -0,0 +1,245 @@
+<template>
+  <a-drawer
+    :title="selectedTheme.name + ' 主题设置'"
+    width="100%"
+    placement="right"
+    closable
+    destroyOnClose
+    @close="onClose"
+    :visible="visible"
+  >
+    <a-row
+      :gutter="12"
+      type="flex"
+    >
+      <a-col
+        :xl="12"
+        :lg="12"
+        :md="12"
+        :sm="24"
+        :xs="24"
+      >
+        <a-skeleton
+          active
+          :loading="settingLoading"
+          :paragraph="{rows: 10}"
+        >
+          <a-card :bordered="false">
+            <img
+              :alt="selectedTheme.name"
+              :src="selectedTheme.screenshots"
+              slot="cover"
+            >
+            <a-card-meta :description="selectedTheme.description">
+              <template slot="title">
+                <a
+                  :href="selectedTheme.author.website"
+                  target="_blank"
+                >{{ selectedTheme.author.name }}</a>
+              </template>
+              <a-avatar
+                v-if="selectedTheme.logo"
+                :src="selectedTheme.logo"
+                size="large"
+                slot="avatar"
+              />
+              <a-avatar
+                v-else
+                size="large"
+                slot="avatar"
+              >{{ selectedTheme.author.name }}</a-avatar>
+            </a-card-meta>
+          </a-card>
+        </a-skeleton>
+      </a-col>
+      <a-col
+        :xl="12"
+        :lg="12"
+        :md="12"
+        :sm="24"
+        :xs="24"
+        style="padding-bottom: 50px;"
+      >
+        <a-skeleton
+          active
+          :loading="settingLoading"
+          :paragraph="{rows: 20}"
+        >
+          <div class="card-container">
+            <a-tabs
+              type="card"
+              defaultActiveKey="0"
+              v-if="themeConfiguration.length>0"
+            >
+              <a-tab-pane
+                v-for="(group, index) in themeConfiguration"
+                :key="index.toString()"
+                :tab="group.label"
+              >
+                <a-form layout="vertical">
+                  <a-form-item
+                    v-for="(item, index1) in group.items"
+                    :label="item.label + '：'"
+                    :key="index1"
+                    :wrapper-col="wrapperCol"
+                  >
+                    <a-input
+                      v-model="themeSettings[item.name]"
+                      :defaultValue="item.defaultValue"
+                      :placeholder="item.placeholder"
+                      v-if="item.type == 'TEXT'"
+                    />
+                    <a-input
+                      type="textarea"
+                      :autosize="{ minRows: 5 }"
+                      v-model="themeSettings[item.name]"
+                      :placeholder="item.placeholder"
+                      v-else-if="item.type == 'TEXTAREA'"
+                    />
+                    <a-radio-group
+                      v-decorator="['radio-group']"
+                      :defaultValue="item.defaultValue"
+                      v-model="themeSettings[item.name]"
+                      v-else-if="item.type == 'RADIO'"
+                    >
+                      <a-radio
+                        v-for="(option, index2) in item.options"
+                        :key="index2"
+                        :value="option.value"
+                      >{{ option.label }}</a-radio>
+                    </a-radio-group>
+                    <a-select
+                      v-model="themeSettings[item.name]"
+                      :defaultValue="item.defaultValue"
+                      v-else-if="item.type == 'SELECT'"
+                    >
+                      <a-select-option
+                        v-for="option in item.options"
+                        :key="option.value"
+                        :value="option.value"
+                      >{{ option.label }}</a-select-option>
+                    </a-select>
+                    <verte
+                      picker="square"
+                      model="hex"
+                      v-model="themeSettings[item.name]"
+                      :defaultValue="item.defaultValue"
+                      v-else-if="item.type == 'COLOR'"
+                      style="display: inline-block;height: 24px;"
+                    ></verte>
+                    <a-input
+                      v-model="themeSettings[item.name]"
+                      :defaultValue="item.defaultValue"
+                      :placeholder="item.placeholder"
+                      v-else
+                    />
+                  </a-form-item>
+                </a-form>
+              </a-tab-pane>
+            </a-tabs>
+            <a-alert
+              message="当前主题暂无设置选项"
+              banner
+              v-else
+            />
+          </div>
+        </a-skeleton>
+      </a-col>
+    </a-row>
+
+    <footer-tool-bar
+      v-if="themeConfiguration.length>0"
+      :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
+    >
+      <a-button
+        type="primary"
+        @click="handleSaveSettings"
+      >保存</a-button>
+    </footer-tool-bar>
+  </a-drawer>
+</template>
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
+import FooterToolBar from '@/components/FooterToolbar'
+import themeApi from '@/api/theme'
+export default {
+  name: 'ThemeSetting',
+  mixins: [mixin, mixinDevice],
+  components: {
+    AttachmentSelectDrawer,
+    FooterToolBar
+  },
+  data() {
+    return {
+      selectedTheme: this.theme,
+      themeConfiguration: [],
+      themeSettings: [],
+      settingLoading: true,
+      wrapperCol: {
+        xl: { span: 12 },
+        lg: { span: 12 },
+        sm: { span: 24 },
+        xs: { span: 24 }
+      }
+    }
+  },
+  model: {
+    prop: 'visible',
+    event: 'close'
+  },
+  props: {
+    theme: {
+      type: Object,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  created() {
+    this.loadSkeleton()
+    this.initData()
+  },
+  watch: {
+    visible: function(newValue, oldValue) {
+      if (newValue) {
+        this.loadSkeleton()
+      }
+    }
+  },
+  methods: {
+    loadSkeleton() {
+      this.settingLoading = true
+      setTimeout(() => {
+        this.settingLoading = false
+      }, 500)
+    },
+    initData() {
+      this.settingLoading = true
+
+      themeApi.fetchConfiguration(this.selectedTheme.id).then(response => {
+        this.themeConfiguration = response.data.data
+        themeApi.fetchSettings(this.selectedTheme.id).then(response => {
+          this.themeSettings = response.data.data
+          setTimeout(() => {
+            this.settingLoading = false
+          }, 300)
+        })
+      })
+    },
+    handleSaveSettings() {
+      themeApi.saveSettings(this.selectedTheme.id, this.themeSettings).then(response => {
+        this.$message.success('保存成功！')
+      })
+    },
+    onClose() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>
--- a/src/views/post/components/PostSetting.vue
+++ b/src/views/post/components/PostSetting.vue
@ -4,9 +4,9 @@
    :width="isMobile()?'100%':'460'"
    placement="right"
    closable
-    @close="onClose"
    destroyOnClose
-    :visible="visiable"
+    @close="onClose"
+    :visible="visible"
  >
    <a-skeleton
      active
@ -213,7 +213,7 @@ export default {
    }
  },
  model: {
-    prop: 'visiable',
+    prop: 'visible',
    event: 'close'
  },
  props: {
@ -229,7 +229,7 @@ export default {
      type: Array,
      required: true
    },
-    visiable: {
+    visible: {
      type: Boolean,
      required: false,
      default: true
@ -279,7 +279,7 @@ export default {
    selectedCategoryIds(val) {
      this.$emit('onRefreshCategoryIds', val)
    },
-    visiable: function(newValue, oldValue) {
+    visible: function(newValue, oldValue) {
      if (newValue) {
        this.loadSkeleton()
      }
--- a/src/views/sheet/components/SheetSetting.vue
+++ b/src/views/sheet/components/SheetSetting.vue
@ -6,7 +6,7 @@
    closable
    destroyOnClose
    @close="onClose"
-    :visible="visiable"
+    :visible="visible"
  >
    <a-skeleton
      active
@ -122,7 +122,7 @@ export default {
    }
  },
  model: {
-    prop: 'visiable',
+    prop: 'visible',
    event: 'close'
  },
  props: {
@ -130,7 +130,7 @@ export default {
      type: Object,
      required: true
    },
-    visiable: {
+    visible: {
      type: Boolean,
      required: false,
      default: true
@ -148,7 +148,7 @@ export default {
    selectedSheet(val) {
      this.$emit('onRefreshSheet', val)
    },
-    visiable: function(newValue, oldValue) {
+    visible: function(newValue, oldValue) {
      if (newValue) {
        this.loadSkeleton()
      }
--- a/src/views/sheet/internal/JournalList.vue
+++ b/src/views/sheet/internal/JournalList.vue
@ -244,9 +244,9 @@
      title="评论列表"
      :width="isMobile()?'100%':'460'"
      closable
-      :visible="commentVisiable"
+      :visible="commentVisible"
      destroyOnClose
-      @close="()=>this.commentVisiable = false"
+      @close="()=>this.commentVisible = false"
    >
      <a-row
        type="flex"
@ -305,7 +305,7 @@ export default {
      title: '发表',
      listLoading: false,
      visible: false,
-      commentVisiable: false,
+      commentVisible: false,
      selectCommentVisible: false,
      pagination: {
        page: 1,
@ -409,7 +409,7 @@ export default {
      this.journal = journal
      journalApi.commentTree(this.journal.id).then(response => {
        this.comments = response.data.data.content
-        this.commentVisiable = true
+        this.commentVisible = true
      })
    },
    handleCommentReplyClick(comment) {
--- a/src/views/sheet/internal/PhotoList.vue
+++ b/src/views/sheet/internal/PhotoList.vue
@ -104,7 +104,7 @@
      title="图片详情"
      :width="isMobile()?'100%':'460'"
      closable
-      :visible="drawerVisiable"
+      :visible="drawerVisible"
      destroyOnClose
      @close="onDrawerClose"
    >
@ -283,7 +283,7 @@ export default {
  mixins: [mixin, mixinDevice],
  data() {
    return {
-      drawerVisiable: false,
+      drawerVisible: false,
      drawerLoading: false,
      listLoading: true,
      thumDrawerVisible: false,
@ -338,7 +338,7 @@ export default {
    },
    showDrawer(photo) {
      this.photo = photo
-      this.drawerVisiable = true
+      this.drawerVisible = true
    },
    handlePaginationChange(page, size) {
      this.$log.debug(`Current: ${page}, PageSize: ${size}`)
@ -348,7 +348,7 @@ export default {
    },
    handleAddClick() {
      this.editable = true
-      this.drawerVisiable = true
+      this.drawerVisible = true
    },
    handleEditClick() {
      this.editable = true
@ -372,7 +372,7 @@ export default {
      this.loadPhotos()
    },
    onDrawerClose() {
-      this.drawerVisiable = false
+      this.drawerVisible = false
      this.photo = {}
      this.editable = false
    }
--- a/src/views/system/About.vue
+++ b/src/views/system/About.vue
@ -262,7 +262,7 @@ UA 信息：${navigator.userAgent}`
            return
          }
          const title = '新版本提醒'
-          const content = '检测到新版本：' + data.name + '，点击下方按钮下载最新版本。'
+          const content = '检测到新版本：' + data.name + '，点击下方按钮查看最新版本。'
          const url = data.html_url
          this.$notification.open({
            message: title,
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@ -61,7 +61,7 @@

        <a-modal
          title="API 设置"
-          :visible="apiModifyVisiable"
+          :visible="apiModifyVisible"
          @ok="handleApiModifyOk"
          @cancel="handleApiModifyCancel"
        >
@ -90,7 +90,7 @@ export default {
    return {
      username: null,
      password: null,
-      apiModifyVisiable: false,
+      apiModifyVisible: false,
      defaultApiBefore: window.location.protocol + '//',
      apiUrl: window.location.host
    }
@ -131,14 +131,14 @@ export default {
    },
    handleApiModifyModalOpen() {
      this.apiUrl = this.defaultApiUrl
-      this.apiModifyVisiable = true
+      this.apiModifyVisible = true
    },
    handleApiModifyOk() {
      this.setApiUrl(this.apiUrl)
-      this.apiModifyVisiable = false
+      this.apiModifyVisible = false
    },
    handleApiModifyCancel() {
-      this.apiModifyVisiable = false
+      this.apiModifyVisible = false
    },
    handleApiUrlRestore() {
      this.restoreApiUrl()