✨ updated

src/components/CommentReply/src/CommentInput/CommentInput.vue

@@ -210,7 +210,6 @@ const getSlideCaptchaDataThrottled = useThrottleFn(comment.getSlideCaptchaData,
  */
 async function showSlideCaptcha() {
   if (commentContent.value.trim() === "") {
-    message.error(t('comment.commentContentNotEmpty'));
     return;
   }
   if (comment.imageList.length > 3) {

src/components/CommentReply/src/CommentList/CommentList.vue

@@ -94,13 +94,13 @@
                         {{ item.browser }}
                       </AButton>
                       <!-- 评论操作按钮 -->
-                      <ADropdown trigger="click">
+                      <ADropdown trigger="click" @click.prevent>
                         <AButton type="text" size="small" :icon="h(EllipsisOutlined)" class="reply-action-btn"
                                  @click.prevent>
                         </AButton>
                         <template #overlay>
                           <AMenu>
-                            <AMenuItem key="report">
+                            <AMenuItem key="report" @click="showMessageReport = true">
                               <WarningOutlined/>
                               {{ t('comment.report') }}
                             </AMenuItem>
@@ -127,6 +127,11 @@
       </div>
       <AEmpty :description="null" v-show="!comment.commentList.comments"/>
     </ASkeleton>
+
+    <!--举报窗口-->
+    <AModal v-model:open="showMessageReport" :title="t('comment.report')" :width="600" :footer="null">
+      <MessageReport/>
+    </AModal>
   </div>
 </template>
 
@@ -149,6 +154,7 @@ import useStore from "@/store";
 import {useRouter} from "vue-router";
 import ReplyInput from "@/components/CommentReply/src/ReplyInput/ReplyInput.vue";
 import ReplyList from "@/components/CommentReply/src/ReplyList/ReplyList.vue";
+import MessageReport from "@/components/CommentReply/src/MessageReport/MessageReport.vue";
 
 
 const {t} = useI18n();
@@ -158,6 +164,7 @@ const user = useStore().user;
 
 const topicId = ref<string>("123");
 
+const showMessageReport = ref<boolean>(false);
 
 /**
  *  获取评论列表

src/components/CommentReply/src/MessageReport/MessageReport.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <ASteps :current="current" :status="current==2?'finish':'process'" @change="handleCurrentChange">
+      <AStep title="类型">
+      </AStep>
+      <AStep title="说明">
+      </AStep>
+      <AStep title="材料">
+      </AStep>
+    </ASteps>
+    <div class="steps-content">
+      <div v-if="current === 0">
+        <a-radio-group v-model:value="value">
+          <a-radio :style="radioStyle" :value="1">Option A</a-radio>
+          <a-radio :style="radioStyle" :value="2">Option B</a-radio>
+          <a-radio :style="radioStyle" :value="3">Option C</a-radio>
+          <a-radio :style="radioStyle" :value="4">
+            More...
+            <a-input v-if="value === 4" style="width: 100px; margin-left: 10px"/>
+          </a-radio>
+        </a-radio-group>
+      </div>
+      <div v-if="current === 1">
+        <a-textarea :rows="8" placeholder="maxlength is 6" :maxlength="6"/>
+      </div>
+      <div v-if="current === 2">
+        <a-upload-dragger
+            v-model:fileList="fileList"
+            name="file"
+            :multiple="true"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            @change="handleChange"
+            @drop="handleDrop"
+        >
+          <p class="ant-upload-drag-icon">
+            <inbox-outlined></inbox-outlined>
+          </p>
+          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+          <p class="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
+            band files
+          </p>
+        </a-upload-dragger>
+      </div>
+    </div>
+    <div class="steps-action">
+      <AButton v-if="current > 0 && current <= 2" @click="prev">上一步</AButton>
+      <AButton v-if="current >= 0 && current < 2" type="primary" style="margin-left: 8px" @click="next">下一步</AButton>
+      <AButton
+          style="margin-left: 8px"
+          v-if="current == 2"
+          type="primary"
+          @click="message.success('Processing complete!')"
+      >
+        完成
+      </AButton>
+
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {reactive, ref} from 'vue';
+import type {UploadChangeParam} from 'ant-design-vue';
+import {message} from 'ant-design-vue';
+
+const current = ref<number>(0);
+const next = () => {
+  current.value++;
+};
+const prev = () => {
+  current.value--;
+};
+function handleCurrentChange(index: number) {
+  current.value = index;
+}
+const value = ref<number>(1);
+const radioStyle = reactive({
+  display: 'flex',
+  height: '30px',
+  lineHeight: '30px',
+});
+
+
+const fileList = ref([]);
+const handleChange = (info: UploadChangeParam) => {
+  const status = info.file.status;
+  if (status !== 'uploading') {
+    console.log(info.file, info.fileList);
+  }
+  if (status === 'done') {
+    message.success(`${info.file.name} file uploaded successfully.`);
+  } else if (status === 'error') {
+    message.error(`${info.file.name} file upload failed.`);
+  }
+};
+
+function handleDrop(e: DragEvent) {
+  console.log(e);
+}
+</script>
+<style scoped lang="less" src="./index.scss">
+
+</style>

src/components/CommentReply/src/MessageReport/index.scss

@@ -0,0 +1,16 @@
+.steps-content {
+    margin-top: 16px;
+    border: 1px dashed #e9e9e9;
+    border-radius: 10px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    //padding-top: 80px;
+}
+
+.steps-action {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 24px;
+}

src/components/CommentReply/src/ReplyInput/ReplyInput.vue

@@ -155,7 +155,6 @@ const replySubmitDebounced = useDebounceFn(replySubmit, 500);
  */
 async function replySubmit(point: any) {
   if (replyContent.value.trim() === "") {
-    message.error(t('comment.commentContentNotEmpty'));
     return;
   }
   if (comment.imageList.length > 3) {

src/components/CommentReply/src/ReplyList/ReplyList.vue

@@ -79,7 +79,7 @@
                       </AButton>
                       <template #overlay>
                         <AMenu>
-                          <AMenuItem key="report">
+                          <AMenuItem key="report" @click="showMessageReport = true">
                             <WarningOutlined/>
                             {{ t('comment.report') }}
                           </AMenuItem>
@@ -106,6 +106,9 @@
       </AFlex>
       <AEmpty :description="null" v-show="!comment.replyList.comments"/>
     </ASpin>
+    <AModal v-model:open="showMessageReport" :title="t('comment.report')" :width="600" :footer="null">
+      <MessageReport/>
+    </AModal>
   </AFlex>
 </template>
 <script lang="ts" setup>
@@ -123,6 +126,7 @@ import {useI18n} from "vue-i18n";
 import useStore from "@/store";
 import ReplyReply from "@/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue";
 import {useThrottleFn} from "@vueuse/core";
+import MessageReport from "@/components/CommentReply/src/MessageReport/MessageReport.vue";
 
 const {t} = useI18n();
 
@@ -135,7 +139,7 @@ const props = defineProps({
     required: true
   }
 });
-
+const showMessageReport = ref<boolean>(false);
 /**
  * 格式化时间
  * @param dateString

src/components/CommentReply/src/ReplyList/index.scss

@@ -1,7 +1,7 @@
 .reply-item-child {
     margin-top: 10px;
     border-radius: 10px;
-    background-color: var(--background-color);
+    background-color: var(--comment-child-background-color);
     padding: 10px;
 
     .reply-pagination-child {

src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue

@@ -166,7 +166,6 @@ const replyReplySubmitThrottled = useThrottleFn(replyReplySubmit, 1000);
  */
 async function replyReplySubmit(point: any) {
   if (replyReplyContent.value.trim() === "") {
-    message.error(t('comment.commentContentNotEmpty'));
     return;
   }
   if (comment.imageList.length > 3) {