pref: created ReactiveButton component. (halo-dev/console#216)

* pref: created ReactiveButton component. * refactor: ReactiveButton. * refactor: Profile page. * feat: add form validate for comment reply. * refactor: PostSettingsDrawer.
JohnNiang · Jul 17, 2020 · 88867e6 · 88867e6
1 parent 23768f1
commit 88867e6
Show file tree

Hide file tree

Showing 40 changed files with 1,202 additions and 576 deletions.
diff --git a/public/index.html b/public/index.html
@@ -17,7 +17,7 @@
 
 <body>
   <noscript>
-    <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
+    <strong>We're sorry but halo admin client doesn't work properly without JavaScript enabled. Please enable it to
       continue.</strong>
   </noscript>
   <div id="app">

diff --git a/src/components/Attachment/AttachmentSelectDrawer.vue b/src/components/Attachment/AttachmentSelectDrawer.vue
@@ -14,7 +14,7 @@
         align="middle"
       >
         <a-input-search
-          placeholder="搜索附件"
+          placeholder="搜索"
           v-model="queryParam.keyword"
           @search="handleQuery()"
           enterButton

diff --git a/src/components/Button/ReactiveButton.vue b/src/components/Button/ReactiveButton.vue
@@ -0,0 +1,89 @@
+<template>
+  <a-button
+    :type="computedType"
+    @click="handleClick"
+    :icon="computedIcon"
+    :loading="loading"
+  >{{ computedText }}</a-button>
+</template>
+<script>
+export default {
+  name: 'ReactiveButton',
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    errored: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    loadedText: {
+      type: String,
+      default: ''
+    },
+    erroredText: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loaded: false,
+      hasError: false
+    }
+  },
+  watch: {
+    loading(value) {
+      if (!value) {
+        this.loaded = true
+        if (this.errored) {
+          this.hasError = true
+        }
+        setTimeout(() => {
+          this.loaded = false
+          this.hasError = false
+          this.$emit('callback')
+        }, 800)
+      }
+    }
+  },
+  computed: {
+    computedType() {
+      if (this.loaded) {
+        return this.hasError ? 'danger' : this.type
+      }
+      return this.type
+    },
+    computedIcon() {
+      if (this.loaded) {
+        return this.hasError ? 'close-circle' : 'check-circle'
+      }
+      return this.icon
+    },
+    computedText() {
+      if (this.loaded) {
+        return this.hasError ? this.erroredText : this.loadedText
+      }
+      return this.text
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
diff --git a/src/components/Editor/MarkdownEditor.vue b/src/components/Editor/MarkdownEditor.vue
@@ -51,7 +51,6 @@ export default {
         var responseObject = response.data
         var HaloEditor = this.$refs.md
         HaloEditor.$img2Url(pos, encodeURI(responseObject.data.path))
-        this.$message.success('图片上传成功！')
       })
     },
     handleSaveDraft() {

diff --git a/src/components/SettingDrawer/setting.js b/src/components/SettingDrawer/setting.js
@@ -80,7 +80,7 @@ const updateTheme = primaryColor => {
         javascriptEnabled: true
       };
     `
-    lessScriptNode.src = 'https://cdnjs.loli.net/ajax/libs/less.js/3.8.1/less.min.js'
+    lessScriptNode.src = 'https://cdn.jsdelivr.net/npm/less@3.8.1/dist/less.min.js'
     lessScriptNode.async = true
     lessScriptNode.onload = () => {
       buildIt()

diff --git a/src/components/Upload/FilePondUpload.vue b/src/components/Upload/FilePondUpload.vue
@@ -7,9 +7,9 @@
       :allow-multiple="multiple"
       :allowRevert="false"
       :accepted-file-types="accept"
-      :maxParallelUploads="loadOptions?options.attachment_upload_max_parallel_uploads:1"
-      :allowImagePreview="loadOptions?options.attachment_upload_image_preview_enable:false"
-      :maxFiles="loadOptions?options.attachment_upload_max_files:1"
+      :maxParallelUploads="maxParallelUploads"
+      :allowImagePreview="allowImagePreview"
+      :maxFiles="maxFiles"
       labelFileProcessing="上传中"
       labelFileProcessingComplete="上传完成"
       labelFileProcessingAborted="取消上传"
@@ -77,6 +77,27 @@ export default {
       default: true
     }
   },
+  computed: {
+    ...mapGetters(['options']),
+    maxParallelUploads() {
+      if (this.options && this.options.length > 0) {
+        return this.options.attachment_upload_max_parallel_uploads
+      }
+      return 1
+    },
+    allowImagePreview() {
+      if (this.options && this.options.length > 0) {
+        return this.options.attachment_upload_image_preview_enable
+      }
+      return false
+    },
+    maxFiles() {
+      if (this.options && this.options.length > 0) {
+        return this.options.attachment_upload_max_files
+      }
+      return 1
+    }
+  },
   data: function() {
     return {
       server: {
@@ -120,9 +141,6 @@ export default {
       fileList: []
     }
   },
-  computed: {
-    ...mapGetters(['options'])
-  },
   methods: {
     handleFilePondInit() {
       this.$log.debug('FilePond has initialized')

diff --git a/src/components/index.js b/src/components/index.js
@@ -4,12 +4,14 @@ import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import FilePondUpload from '@/components/Upload/FilePondUpload'
 import AttachmentSelectDrawer from './Attachment/AttachmentSelectDrawer'
+import ReactiveButton from './Button/ReactiveButton'
 
 const _components = {
   Ellipsis,
   FooterToolbar,
   FilePondUpload,
-  AttachmentSelectDrawer
+  AttachmentSelectDrawer,
+  ReactiveButton
 }
 
 const components = {}

diff --git a/src/utils/util.js b/src/utils/util.js
@@ -40,3 +40,7 @@ export function timeAgo(time) {
 export function isObject(value) {
   return value && typeof value === 'object' && value.constructor === Object
 }
+
+export function datetimeFormat(value, pattern = 'YYYY-MM-DD HH:mm') {
+  return moment(value).format(pattern)
+}
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
@@ -327,7 +327,7 @@ export default {
       this.$contextmenu({
         items: [
           {
-            label: '复制图片链接',
+            label: `${this.handleJudgeMediaType(item) ? '复制图片链接' : '复制文件链接'}`,
             onClick: () => {
               const text = `${encodeURI(item.path)}`
               this.$copyText(text)
@@ -343,6 +343,7 @@ export default {
             divided: true
           },
           {
+            disabled: !this.handleJudgeMediaType(item),
             label: '复制 Markdown 格式链接',
             onClick: () => {
               const text = `![${item.name}](${encodeURI(item.path)})`

diff --git a/src/views/attachment/components/AttachmentDetailDrawer.vue b/src/views/attachment/components/AttachmentDetailDrawer.vue
@@ -144,7 +144,15 @@
         okText="确定"
         cancelText="取消"
       >
-        <a-button type="danger">删除</a-button>
+        <ReactiveButton
+          type="danger"
+          @callback="handleDeletedCallback"
+          :loading="deleting"
+          :errored="deleteErrored"
+          text="删除"
+          loadedText="删除成功"
+          erroredText="删除失败"
+        ></ReactiveButton>
       </a-popconfirm>
     </div>
   </a-drawer>
@@ -173,6 +181,8 @@ export default {
       videoPreviewVisible: false,
       nonsupportPreviewVisible: false,
       player: {},
+      deleting: false,
+      deleteErrored: false,
       videoOptions: {
         lang: 'zh-cn',
         video: {
@@ -214,11 +224,22 @@ export default {
   },
   methods: {
     handleDeleteAttachment() {
-      attachmentApi.delete(this.attachment.id).then(response => {
-        this.$message.success('删除成功！')
-        this.$emit('delete', this.attachment)
-        this.onClose()
-      })
+      this.deleting = true
+      attachmentApi
+        .delete(this.attachment.id)
+        .catch(() => {
+          this.deleteErrored = true
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.deleting = false
+          }, 400)
+        })
+    },
+    handleDeletedCallback() {
+      this.$emit('delete', this.attachment)
+      this.deleteErrored = false
+      this.onClose()
     },
     doUpdateAttachment() {
       if (!this.attachment.name) {

diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue
@@ -402,23 +402,31 @@
       destroyOnClose
     >
       <template slot="footer">
-        <a-button
-          key="submit"
+        <ReactiveButton
           type="primary"
           @click="handleCreateClick"
-        >
-          回复
-        </a-button>
+          @callback="handleRepliedCallback"
+          :loading="replying"
+          :errored="replyErrored"
+          text="回复"
+          loadedText="回复成功"
+          erroredText="回复失败"
+        ></ReactiveButton>
       </template>
-      <a-form layout="vertical">
-        <a-form-item>
+      <a-form-model
+        ref="replyCommentForm"
+        :model="replyComment"
+        :rules="replyCommentRules"
+        layout="vertical"
+      >
+        <a-form-model-item prop="content">
           <a-input
             type="textarea"
             :autoSize="{ minRows: 8 }"
             v-model.trim="replyComment.content"
           />
-        </a-form-item>
-      </a-form>
+        </a-form-model-item>
+      </a-form-model>
     </a-modal>
     <!-- <CommentDetail
       v-model="commentDetailVisible"
@@ -551,9 +559,14 @@ export default {
       comments: [],
       selectedComment: {},
       replyComment: {},
+      replyCommentRules: {
+        content: [{ required: true, message: '* 内容不能为空', trigger: ['change', 'blur'] }]
+      },
       loading: false,
       commentStatus: commentApi.commentStatus,
-      commentDetailVisible: false
+      commentDetailVisible: false,
+      replying: false,
+      replyErrored: false
     }
   },
   created() {
@@ -625,24 +638,32 @@ export default {
       }
     },
     handleCreateClick() {
-      if (!this.replyComment.content) {
-        this.$notification['error']({
-          message: '提示',
-          description: '评论内容不能为空！'
-        })
-        return
+      const _this = this
+      _this.$refs.replyCommentForm.validate(valid => {
+        if (valid) {
+          _this.replying = true
+          commentApi
+            .create(_this.type, _this.replyComment)
+            .catch(() => {
+              _this.replyErrored = true
+            })
+            .finally(() => {
+              setTimeout(() => {
+                _this.replying = false
+              }, 400)
+            })
+        }
+      })
+    },
+    handleRepliedCallback() {
+      if (this.replyErrored) {
+        this.replyErrored = false
+      } else {
+        this.replyComment = {}
+        this.selectedComment = {}
+        this.replyCommentVisible = false
+        this.handleListComments()
       }
-      commentApi
-        .create(this.type, this.replyComment)
-        .then(response => {
-          this.$message.success('回复成功！')
-          this.replyComment = {}
-          this.selectedComment = {}
-          this.replyCommentVisible = false
-        })
-        .finally(() => {
-          this.handleListComments()
-        })
     },
     handlePaginationChange(page, pageSize) {
       this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)