feat: disable comment submit and add loading

open-isle-cli/src/components/CommentEditor.vue

@@ -2,13 +2,24 @@
   <div class="comment-editor-container">
     <div :id="editorId" ref="vditorElement"></div>
     <div class="comment-bottom-container">
-      <div class="comment-submit" @click="submit">发布评论</div>
+      <div
+        class="comment-submit"
+        :class="{ disabled: isDisabled }"
+        @click="submit"
+      >
+        <template v-if="!loading">
+          发布评论
+        </template>
+        <template v-else>
+          <i class="fa-solid fa-spinner fa-spin"></i> 发布中...
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import Vditor from 'vditor'
 import 'vditor/dist/index.css'
 
@@ -19,17 +30,24 @@ export default {
     editorId: {
       type: String,
       default: () => 'editor-' + Math.random().toString(36).slice(2)
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { emit }) {
     const vditorInstance = ref(null)
+    const text = ref('')
+
+    const isDisabled = computed(() => props.loading || !text.value.trim())
 
     const submit = () => {
-      if (!vditorInstance.value) return
-      const text = vditorInstance.value.getValue()
-      if (!text.trim()) return
-      emit('submit', text)
+      if (!vditorInstance.value || isDisabled.value) return
+      const value = vditorInstance.value.getValue()
+      emit('submit', value)
       vditorInstance.value.setValue('')
+      text.value = ''
     }
 
     onMounted(() => {
@@ -60,11 +78,14 @@ export default {
           'link',
           'image'
         ],
-        toolbarConfig: { pin: true }
+        toolbarConfig: { pin: true },
+        input(value) {
+          text.value = value
+        }
       })
     })
 
-    return { submit }
+    return { submit, isDisabled }
   }
 }
 </script>
@@ -89,6 +110,14 @@ export default {
   font-size: 14px;
   cursor: pointer;
 }
+.comment-submit.disabled {
+  background-color: var(--primary-color-disabled);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.comment-submit.disabled:hover {
+  background-color: var(--primary-color-disabled);
+}
 .comment-submit:hover {
   background-color: var(--primary-color-hover);
 }

open-isle-cli/src/components/CommentItem.vue

@@ -40,7 +40,7 @@
           </div>
         </div>
       </div>
-      <CommentEditor v-if="showEditor" @submit="submitReply" />
+      <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" />
       <div v-if="comment.reply && comment.reply.length" class="reply-toggle" @click="toggleReplies">
         {{ comment.reply.length }}条回复
       </div>
@@ -77,6 +77,7 @@ const CommentItem = {
   setup(props) {
     const showReplies = ref(false)
     const showEditor = ref(false)
+    const isWaitingForReply = ref(false)
     const toggleReplies = () => {
       showReplies.value = !showReplies.value
     }
@@ -85,9 +86,11 @@ const CommentItem = {
     }
     const submitReply = async (text) => {
       if (!text.trim()) return
+      isWaitingForReply.value = true
       const token = getToken()
       if (!token) {
         toast.error('请先登录')
+        isWaitingForReply.value = false
         return
       }
       try {
@@ -120,13 +123,15 @@ const CommentItem = {
         }
       } catch (e) {
         toast.error('回复失败')
+      } finally {
+        isWaitingForReply.value = false
       }
     }
     const copyCommentLink = () => {
       const link = `${location.origin}${location.pathname}#comment-${props.comment.id}`
       navigator.clipboard.writeText(link)
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
   }
 }
 CommentItem.components = { CommentItem, CommentEditor }