Created ThemeSetting component.

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}`)

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) {

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

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()
       }

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) {

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() {

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
+    <ThemeSetting
-        v-if="themeConfiguration.length>0"
+      :theme="selectedTheme"
-        :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
+      v-model="themeSettingVisible"
-      >
+      @close="onThemeSettingsClose"
-        <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>
 
-      <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 ThemeSetting from './components/ThemeSetting'
-import FooterToolBar from '@/components/FooterToolbar'
-import { mixin, mixinDevice } from '@/utils/mixin.js'
 import themeApi from '@/api/theme'
 import Verte from 'verte'
 import 'verte/dist/verte.css'
 
 export default {
   components: {
-    AttachmentDrawer,
+    ThemeSetting,
-    FooterToolBar,
     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,
+      themeSettingVisible: false,
-      themeConfiguration: [],
+      selectedTheme: {},
-      themeSettings: [],
-      themeProperty: null,
       fetchingUrl: null,
       uploadHandler: themeApi.upload,
       updateByUploadHandler: themeApi.updateByUpload,
@@ -451,17 +279,17 @@ export default {
   created() {
     this.loadThemes()
   },
-  destroyed: function() {
+  // destroyed: function() {
-    if (this.visible) {
+  //   if (this.visible) {
-      this.visible = false
+  //     this.visible = false
-    }
+  //   }
-  },
+  // },
-  beforeRouteLeave(to, from, next) {
+  // beforeRouteLeave(to, from, next) {
-    if (this.visible) {
+  //   if (this.visible) {
-      this.visible = false
+  //     this.visible = false
-    }
+  //   }
-    next()
+  //   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() {
+    onThemeSettingsClose() {
-      themeApi.saveSettings(this.themeProperty.id, this.themeSettings).then(response => {
+      this.themeSettingVisible = false
-        this.$message.success('保存成功！')
+      this.selectedTheme = {}
-      })
-    },
-    onClose() {
-      this.visible = false
-      this.optionLoading = false
-      this.themeConfiguration = []
-      this.themeProperty = null
     },
     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
     }
   }
 }

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>

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()
       }

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()
       }

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) {

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
     }

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,

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()