pref: post publishing experience. (#125)

* pref: post publishing experience.

* fix: sheet tab icon.

src/api/log.js

@@ -71,12 +71,20 @@ logApi.logType = {
     text: '页面发布'
   },
   SHEET_EDITED: {
-    value: 50,
+    value: 55,
     text: '页面修改'
   },
   SHEET_DELETED: {
-    value: 50,
+    value: 60,
     text: '页面删除'
+  },
+  MFA_UPDATED: {
+    value: 65,
+    text: '两步验证'
+  },
+  LOGGED_PRE_CHECK: {
+    value: 70,
+    text: '登陆验证'
   }
 }
 

src/views/post/PostEdit.vue

@@ -46,12 +46,12 @@
       <a-button
         type="danger"
         @click="handleSaveDraft(false)"
-        :disabled="saving"
+        :loading="draftSaving"
       >保存草稿</a-button>
       <a-button
         @click="handlePreview"
         style="margin-left: 8px;"
-        :disabled="saving"
+        :loading="previewSaving"
       >预览</a-button>
       <a-button
         type="primary"
@@ -97,7 +97,8 @@ export default {
       selectedMetas: [],
       isSaved: false,
       contentChanges: 0,
-      saving: false
+      draftSaving: false,
+      previewSaving: false
     }
   },
   beforeRouteEnter(to, from, next) {
@@ -183,7 +184,7 @@ export default {
       if (!this.postToStage.title) {
         this.postToStage.title = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss')
       }
-      this.saving = true
+      this.draftSaving = true
       if (this.postToStage.id) {
         // Update the post
         if (draftOnly) {
@@ -193,7 +194,7 @@ export default {
               this.$message.success('保存草稿成功！')
             })
             .finally(() => {
-              this.saving = false
+              this.draftSaving = false
             })
         } else {
           postApi
@@ -204,7 +205,7 @@ export default {
               this.postToStage = response.data.data
             })
             .finally(() => {
-              this.saving = false
+              this.draftSaving = false
             })
         }
       } else {
@@ -217,7 +218,7 @@ export default {
             this.postToStage = response.data.data
           })
           .finally(() => {
-            this.saving = false
+            this.draftSaving = false
           })
       }
     },
@@ -229,7 +230,7 @@ export default {
       if (!this.postToStage.title) {
         this.postToStage.title = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss')
       }
-      this.saving = true
+      this.previewSaving = true
       if (this.postToStage.id) {
         // Update the post
         postApi.update(this.postToStage.id, this.postToStage, false).then(response => {
@@ -240,7 +241,7 @@ export default {
               window.open(response.data, '_blank')
             })
             .finally(() => {
-              this.saving = false
+              this.previewSaving = false
             })
         })
       } else {
@@ -254,7 +255,7 @@ export default {
               window.open(response.data, '_blank')
             })
             .finally(() => {
-              this.saving = false
+              this.previewSaving = false
             })
         })
       }

src/views/post/components/PostSettingDrawer.vue

@@ -293,12 +293,12 @@
         style="marginRight: 8px"
         @click="handleDraftClick"
         v-if="saveDraftButton"
-        :disabled="saving"
+        :loading="draftSaving"
       >保存草稿</a-button>
       <a-button
         @click="handlePublishClick"
         type="primary"
-        :disabled="saving"
+        :loading="saving"
       > {{ selectedPost.id?'保存':'发布' }} </a-button>
     </div>
   </a-drawer>
@@ -335,7 +335,8 @@ export default {
       categories: [],
       categoryToCreate: {},
       customTpls: [],
-      saving: false
+      saving: false,
+      draftSaving: false
     }
   },
   props: {
@@ -495,7 +496,11 @@ export default {
       this.selectedPost.tagIds = this.selectedTagIds
       // Set post metas
       this.selectedPost.metas = this.selectedMetas
-      this.saving = true
+      if (this.selectedPost.status === 'DRAFT') {
+        this.draftSaving = true
+      } else {
+        this.saving = true
+      }
       if (this.selectedPost.id) {
         // Update the post
         postApi
@@ -514,6 +519,7 @@ export default {
           })
           .finally(() => {
             this.saving = false
+            this.draftSaving = false
           })
       } else {
         // Create the post
@@ -534,6 +540,7 @@ export default {
           })
           .finally(() => {
             this.saving = false
+            this.draftSaving = false
           })
       }
     },

src/views/sheet/SheetEdit.vue

@@ -41,12 +41,12 @@
       <a-button
         type="danger"
         @click="handleSaveDraft(false)"
-        :disabled="saving"
+        :loading="draftSaving"
       >保存草稿</a-button>
       <a-button
         @click="handlePreview"
         style="margin-left: 8px;"
-        :disabled="saving"
+        :loading="previewSaving"
       >预览</a-button>
       <a-button
         type="primary"
@@ -90,7 +90,8 @@ export default {
       selectedMetas: [],
       isSaved: false,
       contentChanges: 0,
-      saving: false
+      draftSaving: false,
+      previewSaving: false
     }
   },
   beforeRouteEnter(to, from, next) {
@@ -174,7 +175,7 @@ export default {
       if (!this.sheetToStage.title) {
         this.sheetToStage.title = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss')
       }
-      this.saving = true
+      this.draftSaving = true
       if (this.sheetToStage.id) {
         if (draftOnly) {
           sheetApi
@@ -183,7 +184,7 @@ export default {
               this.$message.success('保存草稿成功！')
             })
             .finally(() => {
-              this.saving = false
+              this.draftSaving = false
             })
         } else {
           sheetApi
@@ -194,7 +195,7 @@ export default {
               this.sheetToStage = response.data.data
             })
             .finally(() => {
-              this.saving = false
+              this.draftSaving = false
             })
         }
       } else {
@@ -206,7 +207,7 @@ export default {
             this.sheetToStage = response.data.data
           })
           .finally(() => {
-            this.saving = false
+            this.draftSaving = false
           })
       }
     },
@@ -218,7 +219,7 @@ export default {
       if (!this.sheetToStage.title) {
         this.sheetToStage.title = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss')
       }
-      this.saving = true
+      this.previewSaving = true
       if (this.sheetToStage.id) {
         sheetApi.update(this.sheetToStage.id, this.sheetToStage, false).then(response => {
           this.$log.debug('Updated sheet', response.data.data)
@@ -228,7 +229,7 @@ export default {
               window.open(response.data, '_blank')
             })
             .finally(() => {
-              this.saving = false
+              this.previewSaving = false
             })
         })
       } else {
@@ -241,7 +242,7 @@ export default {
               window.open(response.data, '_blank')
             })
             .finally(() => {
-              this.saving = false
+              this.previewSaving = false
             })
         })
       }

src/views/sheet/SheetList.vue

@@ -3,18 +3,18 @@
     <a-row>
       <a-col :span="24">
         <div class="card-container">
-          <a-tabs type="card">
+          <a-tabs
-            <a-tab-pane key="independent">
+            v-model="activeKey"
+            type="card"
+          >
+            <a-tab-pane
+              v-for="pane in panes"
+              :key="pane.key"
+            >
               <span slot="tab">
-                <a-icon type="paper-clip" />独立页面
+                <a-icon :type="pane.icon" />{{ pane.title }}
               </span>
-              <IndependentSheetList />
+              <component :is="pane.component"></component>
-            </a-tab-pane>
-            <a-tab-pane key="custom">
-              <span slot="tab">
-                <a-icon type="fork" />自定义页面
-              </span>
-              <CustomSheetList />
             </a-tab-pane>
           </a-tabs>
         </div>
@@ -28,6 +28,35 @@ import IndependentSheetList from './components/IndependentSheetList'
 import CustomSheetList from './components/CustomSheetList'
 
 export default {
+  data() {
+    const panes = [
+      { title: '独立页面', icon: 'paper-clip', component: 'IndependentSheetList', key: 'independent' },
+      { title: '自定义页面', icon: 'fork', component: 'CustomSheetList', key: 'custom' }
+    ]
+    return {
+      activeKey: panes[0].key,
+      panes
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    // Get post id from query
+    const activeKey = to.query.activeKey
+    next(vm => {
+      if (activeKey) {
+        vm.activeKey = activeKey
+      }
+    })
+  },
+  watch: {
+    activeKey: {
+      handler: function(newVal, oldVal) {
+        if (newVal) {
+          const path = this.$router.history.current.path
+          this.$router.push({ path, query: { activeKey: newVal } }).catch(err => err)
+        }
+      }
+    }
+  },
   components: {
     IndependentSheetList,
     CustomSheetList

src/views/sheet/components/SheetSettingDrawer.vue

@@ -203,12 +203,12 @@
         v-if="saveDraftButton"
         style="marginRight: 8px"
         @click="handleDraftClick"
-        :disabled="saving"
+        :loading="draftSaving"
       >保存草稿</a-button>
       <a-button
         type="primary"
         @click="handlePublishClick"
-        :disabled="saving"
+        :loading="saving"
       >{{ selectedSheet.id?'保存':'发布' }}</a-button>
     </div>
   </a-drawer>
@@ -233,7 +233,8 @@ export default {
       settingLoading: true,
       selectedSheet: this.sheet,
       customTpls: [],
-      saving: false
+      saving: false,
+      draftSaving: false
     }
   },
   props: {
@@ -346,7 +347,11 @@ export default {
         return
       }
       this.selectedSheet.metas = this.selectedMetas
-      this.saving = true
+      if (this.selectedSheet.status === 'DRAFT') {
+        this.draftSaving = true
+      } else {
+        this.saving = true
+      }
       if (this.selectedSheet.id) {
         sheetApi
           .update(this.selectedSheet.id, this.selectedSheet, false)
@@ -360,10 +365,11 @@ export default {
             }
 
             this.$emit('onSaved', true)
-            this.$router.push({ name: 'SheetList' })
+            this.$router.push({ name: 'SheetList', query: { activeKey: 'custom' } })
           })
           .finally(() => {
             this.saving = false
+            this.draftSaving = false
           })
       } else {
         sheetApi
@@ -378,11 +384,12 @@ export default {
             }
 
             this.$emit('onSaved', true)
-            this.$router.push({ name: 'SheetList' })
+            this.$router.push({ name: 'SheetList', query: { activeKey: 'custom' } })
             this.selectedSheet = response.data.data
           })
           .finally(() => {
             this.saving = false
+            this.draftSaving = false
           })
       }
     },

src/views/system/Installation.vue

@@ -231,8 +231,8 @@ export default {
     this.$set(this.installation, 'url', window.location.protocol + '//' + window.location.host)
   },
   methods: {
-    handleValidateConfirmPassword(rule,value, callback){
+    handleValidateConfirmPassword(rule, value, callback) {
-      if (this.installation.confirmPassword && this.installation.password !==  this.installation.confirmPassword ) {
+      if (this.installation.confirmPassword && this.installation.password !== this.installation.confirmPassword) {
         callback('确认密码和密码不匹配')
       }
       callback()

src/views/user/Profile.vue

@@ -145,49 +145,64 @@
                   />
                 </a-form-item>
                 <a-form-item label="两步验证应用：">
-                  <a-list
+                  <a-list itemLayout="horizontal">
-                    :loading="statisticsLoading"
-                    itemLayout="horizontal"
-                  >
                     <a-list-item>
                       <b>Authy</b> 功能丰富 专为两步验证码
                       <a-divider type="vertical" />
-                      <a target="_blank" href="https://authy.com/download/">
+                      <a
-                        IOS/Android/Windows/Mac/Linux
+                        target="_blank"
+                        href="https://authy.com/download/"
+                      >
+                        iOS/Android/Windows/Mac/Linux
                         <a-icon type="link" />
                       </a>
                       <a-divider type="vertical" />
-                      <a target="_blank" href="https://chrome.google.com/webstore/detail/authy/gaedmjdfmmahhbjefcbgaolhhanlaolb?hl=cn">
+                      <a
-                        Chrome扩展
+                        target="_blank"
+                        href="https://chrome.google.com/webstore/detail/authy/gaedmjdfmmahhbjefcbgaolhhanlaolb?hl=cn"
+                      >
+                        Chrome 扩展
                         <a-icon type="link" />
                       </a>
                     </a-list-item>
                     <a-list-item>
-                      <b>GoogleAuthenticator</b> 简单易用 但不支持密钥导出备份
+                      <b>Google Authenticator</b> 简单易用，但不支持密钥导出备份
                       <a-divider type="vertical" />
-                      <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605">
+                      <a
-                        IOS
+                        target="_blank"
+                        href="https://apps.apple.com/us/app/google-authenticator/id388497605"
+                      >
+                        iOS
                         <a-icon type="link" />
                       </a>
                       <a-divider type="vertical" />
-                      <a target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=cn">
+                      <a
+                        target="_blank"
+                        href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=cn"
+                      >
                         Android
                         <a-icon type="link" />
                       </a>
                     </a-list-item>
                     <a-list-item>
-                      <b>MicrosoftAuthenticator</b> 使用微软全家桶的推荐
+                      <b>Microsoft Authenticator</b> 使用微软全家桶的推荐
                       <a-divider type="vertical" />
-                      <a target="_blank" href="https://www.microsoft.com/zh-cn/account/authenticator">
+                      <a
-                        IOS/Android
+                        target="_blank"
+                        href="https://www.microsoft.com/zh-cn/account/authenticator"
+                      >
+                        iOS/Android
                         <a-icon type="link" />
                       </a>
                     </a-list-item>
                     <a-list-item>
                       <b>1Password</b> 强大安全的密码管理付费应用
                       <a-divider type="vertical" />
-                      <a target="_blank" href="https://1password.com/zh-cn/downloads/">
+                      <a
-                        IOS/Android/Windows/Mac/Linux/ChromeOS
+                        target="_blank"
+                        href="https://1password.com/zh-cn/downloads/"
+                      >
+                        iOS/Android/Windows/Mac/Linux/ChromeOS
                         <a-icon type="link" />
                       </a>
                     </a-list-item>
@@ -215,18 +230,14 @@
       :confirmLoading="false"
       @cancel="handleCloseMFAuthModal"
       :closable="false"
-      :maskClosable="false"
       icon="safety-certificate"
       :keyboard="false"
       :centered="true"
       :destroyOnClose="true"
       :width="300"
-
     >
-      <a-form layout="inline" v-if="mfaUsed">
+      <a-form v-if="mfaUsed">
-        <a-form-item
+        <a-form-item extra="* 需要验证两步验证码">
-          extra="* 需要验证两步验证码"
-        >
           <a-input
             placeholder="两步验证码"
             v-model="mfaParam.authcode"
@@ -241,35 +252,30 @@
         </a-form-item>
       </a-form>
 
-      <div v-else>
+      <a-form v-else>
-        <p>
+        <a-form-item
-          1.请扫描二维码或导入 key
+          label="1. 请扫描二维码或导入 key"
+          :extra="`MFAKey:${mfaParam.mfaKey}`"
+        >
           <img
-            width="235"
+            width="100%"
             :src="mfaParam.qrImage"
           />
-        </p>
+        </a-form-item>
-        <p style="font-size: 12px;">
+        <a-form-item label="2. 验证两步验证码">
-          MFAKey:<br>{{ mfaParam.mfaKey }}
+          <a-input
-        </p>
+            placeholder="两步验证码"
-        <p>
+            v-model="mfaParam.authcode"
-          2.验证两步验证码
+            :maxLength="6"
-          <a-form-item>
+          >
-            <a-input
+            <a-icon
-              placeholder="两步验证码"
+              slot="prefix"
-              v-model="mfaParam.authcode"
+              type="safety-certificate"
-              :maxLength="6"
+              style="color: rgba(0,0,0,.25)"
-            >
+            />
-              <a-icon
+          </a-input>
-                slot="prefix"
+        </a-form-item>
-                type="safety-certificate"
+      </a-form>
-                style="color: rgba(0,0,0,.25)"
-              />
-            </a-input>
-          </a-form-item>
-        </p>
-        <p style="font-size: 12px;">* 推荐使用 Authy | 微软验证器</p>
-      </div>
     </a-modal>
   </div>
 </template>
@@ -303,7 +309,7 @@ export default {
         authcode: null,
         qrImage: null,
         modal: {
-          title: '确认开启两步验证?',
+          title: '确认开启两步验证？',
           visible: false
         },
         switch: {
@@ -332,7 +338,7 @@ export default {
   watch: {
     mfaType(value) {
       if (value) {
-        this.mfaParam.mfaUsed = (value !== 'NONE')
+        this.mfaParam.mfaUsed = value !== 'NONE'
       }
     },
     mfaUsed(value) {
@@ -404,12 +410,12 @@ export default {
       if (!useMFAuth && this.mfaUsed) {
         // true -> false
         // show cloes MFA modal
-        this.mfaParam.modal.title = '确认关闭两步验证?'
+        this.mfaParam.modal.title = '确认关闭两步验证？'
         this.mfaParam.modal.visible = true
       } else {
         // false -> true
         // show open MFA modal
-        this.mfaParam.modal.title = '确认开启两步验证?'
+        this.mfaParam.modal.title = '确认开启两步验证？'
         // generate MFAKey and Qr Image
         userApi.mfaGenerate('TFA_TOTP').then(response => {
           this.mfaParam.mfaKey = response.data.data.mfaKey
@@ -422,14 +428,14 @@ export default {
       var mfaType = this.mfaUsed ? 'NONE' : 'TFA_TOTP'
       if (mfaType === 'NONE') {
         if (!this.mfaParam.authcode) {
-          this.$message.warn('两步验证码不能为空')
+          this.$message.warn('两步验证码不能为空！')
           return
         }
       }
       userApi.mfaUpdate(mfaType, this.mfaParam.mfaKey, this.mfaParam.authcode).then(response => {
         this.handleCloseMFAuthModal()
         this.mfaParam.mfaType = response.data.data.mfaType
-        this.$message.success(this.mfaUsed ? '两步验证已关闭!' : '两步验证已开启,下次登陆生效!')
+        this.$message.success(this.mfaUsed ? '两步验证已关闭！' : '两步验证已开启,下次登陆生效！')
       })
     },
     handleCloseMFAuthModal() {