🎨 organize code structure

2024-09-26 12:00:48 +08:00
parent 96ae754efd
commit 4f42d1c5b4
7 changed files with 219 additions and 223 deletions
--- a/src/components/CommentReply/Components/CommentInput/CommentInput.vue
+++ b/src/components/CommentReply/Components/CommentInput/CommentInput.vue
@@ -35,28 +35,30 @@
                  method="post"
                  :directory="false"
                  :show-upload-list="false"
-                  :custom-request="customUploadRequest"
-                  :before-upload="beforeUpload"
-                  :disabled="imageList.length >= 3"
+                  :custom-request="comment.customUploadRequest"
+                  :before-upload="comment.beforeUpload"
+                  :disabled="comment.imageList.length >= 3"
              >
-                <ABadge :count="imageList.length">
+                <ABadge :count="comment.imageList.length">
                  <AButton type="text" size="small" :icon="h(PictureOutlined)"
                           class="comment-action-icon">
                    {{ t('comment.picture') }}
                  </AButton>
                </ABadge>
              </AUpload>
-              <template v-if="imageList.length > 0">
-                <ABadge style="margin-left: 10px;" v-for="(item, index) in imageList" :key="index">
-                  <template #count>
-                    <CloseCircleOutlined @click="removeBase64Image(index)" style="color: #f5222d"/>
-                  </template>
-                  <AAvatar shape="square" size="small">
-                    <template #icon>
-                      <AImage v-if="item" :width="24" :height="24" :src="item"/>
+              <template v-if="comment.imageList.length > 0">
+                <AImagePreviewGroup>
+                  <ABadge style="margin-left: 10px;" v-for="(item, index) in comment.imageList" :key="index">
+                    <template #count>
+                      <CloseCircleOutlined @click="comment.removeBase64Image(index)" style="color: #f5222d"/>
                    </template>
-                  </AAvatar>
-                </ABadge>
+                    <AAvatar shape="square" size="small">
+                      <template #icon>
+                        <AImage v-if="item" :width="24" :height="24" :src="item"/>
+                      </template>
+                    </AAvatar>
+                  </ABadge>
+                </AImagePreviewGroup>
              </template>
            </AFlex>
          </AFlex>
@@ -90,15 +92,14 @@ import useStore from "@/store";
 import {message} from "ant-design-vue";
 import {commentSubmitApi} from "@/api/comment";
 import {useDebounceFn, useThrottleFn} from "@vueuse/core";
-import imageCompression from "browser-image-compression";
+
 import {useRouter} from "vue-router";

 const {t} = useI18n();

 const showCommentActions = ref<boolean>(false);
 const commentContent = ref<string>("");
-const fileList = ref<any[]>([]);
-const imageList = ref<any[]>([]);
+
 const user = useStore().user;
 const commentTextAreaPlaceholder = ref<string>(t('comment.placeholder'));
 const topicId = ref<string>("123");
@@ -146,7 +147,7 @@ async function commentSubmit(point: any) {
    message.error(t('comment.commentContentNotEmpty'));
    return;
  }
-  if (imageList.value.length > 3) {
+  if (comment.imageList.length > 3) {
    message.error(t('comment.maxImageCount'));
    return;
  }
@@ -156,7 +157,7 @@ async function commentSubmit(point: any) {
    user_id: user.user.uid,
    topic_id: topicId.value,
    content: content,
-    images: imageList.value,
+    images: comment.imageList,
    author: user.user.uid,
    point: [point.x, point.y],
    key: comment.slideCaptchaData.key,
@@ -165,8 +166,7 @@ async function commentSubmit(point: any) {
  if (result.code === 200 && result.success) {
    message.success(t('comment.commentSuccess'));
    commentContent.value = "";
-    fileList.value = [];
-    imageList.value = [];
+    await comment.clearFileList();
    showSubmitCaptcha.value = false;
    await getCommentList();
  } else {
@@ -188,47 +188,6 @@ async function getCommentList(page: number = 1, size: number = 5, hot: boolean =
  await comment.getCommentList(params);
 }

-// 压缩图片配置
-const options = {
-  maxSizeMB: 0.4,
-  maxWidthOrHeight: 750,
-  maxIteration: 2
-};
-
-/**
- * 上传文件前置
- * @param file
- */
-async function beforeUpload(file: any) {
-  if (!window.FileReader) return false; // 判断是否支持FileReader
-  const compressedFile = await imageCompression(file, options);
-  const reader = new FileReader();
-  reader.readAsDataURL(compressedFile); // 文件转换
-  reader.onloadend = async function () {
-    if (fileList.value.length >= 5) {
-      message.error(t('comment.maxImageCount'));
-      return false;
-    }
-    fileList.value.push(reader.result);
-  };
-  return true;
-}
-
-/**
- *  自定义上传图片请求
- */
-async function customUploadRequest() {
-  imageList.value = fileList.value;
-}
-
-/**
- *  移除图片
- * @param index
- */
-async function removeBase64Image(index: number) {
-  fileList.value.splice(index, 1);
-  imageList.value.splice(index, 1);
-}

 const getSlideCaptchaDataThrottled = useThrottleFn(comment.getSlideCaptchaData, 1000);

--- a/src/components/CommentReply/Components/CommentList/CommentList.vue
+++ b/src/components/CommentReply/Components/CommentList/CommentList.vue
@@ -49,16 +49,18 @@
                  <div class="reply-text" v-html="item.content">
                  </div>
                  <AFlex :vertical="false" align="center" class="reply-images" v-if="item.images">
-                    <AAvatar shape="square" size="large"
-                             v-for="(image, index) in item.images" :key="index">
-                      <template #icon>
-                        <AImage :width="40" :height="40" :src="image">
-                          <template #previewMask>
-                            <EyeOutlined style="font-size: 18px;"/>
-                          </template>
-                        </AImage>
-                      </template>
-                    </AAvatar>
+                    <AImagePreviewGroup>
+                      <AAvatar shape="square" size="large"
+                               v-for="(image, index) in item.images" :key="index">
+                        <template #icon>
+                          <AImage :width="40" :height="40" :src="image">
+                            <template #previewMask>
+                              <EyeOutlined style="font-size: 18px;"/>
+                            </template>
+                          </AImage>
+                        </template>
+                      </AAvatar>
+                    </AImagePreviewGroup>
                  </AFlex>
                  <AFlex :vertical="false" justify="space-between" align="center">
                    <!--评论操作按钮 -->
--- a/src/components/CommentReply/Components/ReplyInput/ReplyInput.vue
+++ b/src/components/CommentReply/Components/ReplyInput/ReplyInput.vue
@@ -48,28 +48,30 @@
                  method="post"
                  :directory="false"
                  :show-upload-list="false"
-                  :custom-request="customUploadRequest"
-                  :before-upload="beforeUpload"
-                  :disabled="imageList.length >= 3"
+                  :custom-request="comment.customUploadRequest"
+                  :before-upload="comment.beforeUpload"
+                  :disabled="comment.imageList.length >= 3"
              >
-                <ABadge :count="imageList.length">
+                <ABadge :count="comment.imageList.length">
                  <AButton type="text" size="small" :icon="h(PictureOutlined)"
                           class="comment-action-icon-reply">
                    {{ t('comment.picture') }}
                  </AButton>
                </ABadge>
              </AUpload>
-              <template v-if="imageList.length > 0">
-                <ABadge style="margin-left: 10px;" v-for="(item, index) in imageList" :key="index">
-                  <template #count>
-                    <CloseCircleOutlined @click="removeBase64Image(index)" style="color: #f5222d"/>
-                  </template>
-                  <AAvatar shape="square" size="small">
-                    <template #icon>
-                      <AImage v-if="item" :width="24" :height="24" :src="item"/>
+              <template v-if="comment.imageList.length > 0">
+                <AImagePreviewGroup>
+                  <ABadge style="margin-left: 10px;" v-for="(item, index) in comment.imageList" :key="index">
+                    <template #count>
+                      <CloseCircleOutlined @click="comment.removeBase64Image(index)" style="color: #f5222d"/>
                    </template>
-                  </AAvatar>
-                </ABadge>
+                    <AAvatar shape="square" size="small">
+                      <template #icon>
+                        <AImage v-if="item" :width="24" :height="24" :src="item"/>
+                      </template>
+                    </AAvatar>
+                  </ABadge>
+                </AImagePreviewGroup>
              </template>
            </AFlex>
          </AFlex>
@@ -98,7 +100,6 @@

 import {h, ref} from "vue";
 import {message} from "ant-design-vue";
-import imageCompression from "browser-image-compression";
 import {CloseOutlined, PictureOutlined, SmileOutlined} from "@ant-design/icons-vue";
 import EMOJI from "@/constant/emoji.ts";
 import {useI18n} from "vue-i18n";
@@ -110,8 +111,6 @@ const {t} = useI18n();
 const comment = useStore().comment;
 const user = useStore().user;
 const commentTextAreaPlaceholder = ref<string>(t('comment.placeholder'));
-const fileList = ref<any[]>([]);
-const imageList = ref<any[]>([]);
 const replyContent = ref<string>("");
 const topicId = ref<string>("123");
 const showSubmitCaptcha = ref<boolean>(false);
@@ -141,47 +140,6 @@ async function insertEmojiToReplyContent(emoji: string) {
  replyContent.value += emoji;
 }

-// 压缩图片配置
-const options = {
-  maxSizeMB: 0.4,
-  maxWidthOrHeight: 750,
-  maxIteration: 2
-};
-
-/**
- * 上传文件前置
- * @param file
- */
-async function beforeUpload(file: any) {
-  if (!window.FileReader) return false; // 判断是否支持FileReader
-  const compressedFile = await imageCompression(file, options);
-  const reader = new FileReader();
-  reader.readAsDataURL(compressedFile); // 文件转换
-  reader.onloadend = async function () {
-    if (fileList.value.length >= 5) {
-      message.error(t('comment.maxImageCount'));
-      return false;
-    }
-    fileList.value.push(reader.result);
-  };
-  return true;
-}
-
-/**
- *  自定义上传图片请求
- */
-async function customUploadRequest() {
-  imageList.value = fileList.value;
-}
-
-/**
- *  移除图片
- * @param index
- */
-async function removeBase64Image(index: number) {
-  fileList.value.splice(index, 1);
-  imageList.value.splice(index, 1);
-}

 /**
 *  回复提交 throttled
@@ -196,7 +154,7 @@ async function replySubmit(point: any) {
    message.error(t('comment.commentContentNotEmpty'));
    return;
  }
-  if (imageList.value.length > 3) {
+  if (comment.imageList.length > 3) {
    message.error(t('comment.maxImageCount'));
    return;
  }
@@ -216,7 +174,7 @@ async function replySubmit(point: any) {
    user_id: user.user.uid,
    topic_id: topicId.value,
    content: content,
-    images: imageList.value,
+    images: comment.imageList,
    author: user.user.uid,
    reply_id: props.item.id,
    reply_user: props.item.user_id,
@@ -226,8 +184,7 @@ async function replySubmit(point: any) {
  const result: any = await replySubmitApi(replyParams);
  if (result.code === 200 && result.success) {
    replyContent.value = "";
-    fileList.value = [];
-    imageList.value = [];
+    await comment.clearFileList();
    showSubmitCaptcha.value = false;
    await getReplyList();
    comment.closeReplyInput();
--- a/src/components/CommentReply/Components/ReplyList/ReplyList.vue
+++ b/src/components/CommentReply/Components/ReplyList/ReplyList.vue
@@ -28,16 +28,18 @@
                <div class="reply-text-child" v-html="child.content">
                </div>
                <AFlex :vertical="false" align="center" class="reply-images" v-if="child.images">
-                  <AAvatar shape="square" size="large"
-                           v-for="(image, index) in child.images" :key="index">
-                    <template #icon>
-                      <AImage :width="40" :height="40" :src="image">
-                        <template #previewMask>
-                          <EyeOutlined style="font-size: 18px;"/>
-                        </template>
-                      </AImage>
-                    </template>
-                  </AAvatar>
+                  <AImagePreviewGroup>
+                    <AAvatar shape="square" size="large"
+                             v-for="(image, index) in child.images" :key="index">
+                      <template #icon>
+                        <AImage :width="40" :height="40" :src="image">
+                          <template #previewMask>
+                            <EyeOutlined style="font-size: 18px;"/>
+                          </template>
+                        </AImage>
+                      </template>
+                    </AAvatar>
+                  </AImagePreviewGroup>
                </AFlex>
                <AFlex :vertical="false" justify="space-between" align="center">
                  <!--评论操作按钮 -->
@@ -141,9 +143,8 @@ const props = defineProps({
  }
 });

-
 /**
- *  格式化时间
+ * 格式化时间
 * @param dateString
 */
 function formatTimeAgo(dateString: string) {
@@ -169,6 +170,7 @@ function formatTimeAgo(dateString: string) {
  return `${seconds} 秒前`;
 }

+
 const commentLikeThrottled = useThrottleFn(commentLike, 1000);

 /**
--- a/src/components/CommentReply/Components/ReplyReplyInput/ReplyReply.vue
+++ b/src/components/CommentReply/Components/ReplyReplyInput/ReplyReply.vue
@@ -51,30 +51,32 @@
                  method="post"
                  :directory="false"
                  :show-upload-list="false"
-                  :custom-request="customUploadRequest"
-                  :before-upload="beforeUpload"
-                  :disabled="imageList.length >= 3"
+                  :custom-request="comment.customUploadRequest"
+                  :before-upload="comment.beforeUpload"
+                  :disabled="comment.imageList.length >= 3"
              >
-                <ABadge :count="imageList.length">
+                <ABadge :count="comment.imageList.length">
                  <AButton type="text" size="small" :icon="h(PictureOutlined)"
                           class="comment-action-icon-reply-child">
                    {{ t('comment.picture') }}
                  </AButton>
                </ABadge>
              </AUpload>
-              <template v-if="imageList.length > 0">
-                <ABadge style="margin-left: 10px;" v-for="(item, index) in imageList"
-                        :key="index">
-                  <template #count>
-                    <CloseCircleOutlined @click="removeBase64Image(index)"
-                                         style="color: #f5222d"/>
-                  </template>
-                  <AAvatar shape="square" size="small">
-                    <template #icon>
-                      <AImage v-if="item" :width="24" :height="24" :src="item"/>
+              <template v-if="comment.imageList.length > 0">
+                <AImagePreviewGroup>
+                  <ABadge style="margin-left: 10px;" v-for="(item, index) in comment.imageList"
+                          :key="index">
+                    <template #count>
+                      <CloseCircleOutlined @click="comment.removeBase64Image(index)"
+                                           style="color: #f5222d"/>
                    </template>
-                  </AAvatar>
-                </ABadge>
+                    <AAvatar shape="square" size="small">
+                      <template #icon>
+                        <AImage v-if="item" :width="24" :height="24" :src="item"/>
+                      </template>
+                    </AAvatar>
+                  </ABadge>
+                </AImagePreviewGroup>
              </template>
            </AFlex>
          </AFlex>
@@ -110,14 +112,12 @@ import {message} from "ant-design-vue";
 import {replyReplySubmitApi} from "@/api/comment";
 import {ReplyCommentParams} from "@/types/comment";
 import {useThrottleFn} from "@vueuse/core";
-import imageCompression from "browser-image-compression";

 const {t} = useI18n();
 const commentTextAreaPlaceholder = ref<string>(t('comment.placeholder'));
 const comment = useStore().comment;
 const replyReplyContent = ref<string>("");
-const fileList = ref<any[]>([]);
-const imageList = ref<any[]>([]);
+
 const user = useStore().user;
 const topicId = ref<string>("123");
 const showSubmitCaptcha = ref<boolean>(false);
@@ -153,48 +153,6 @@ async function insertEmojiToReplyReplyContent(emoji: string) {

 }

-// 压缩图片配置
-const options = {
-  maxSizeMB: 0.4,
-  maxWidthOrHeight: 750,
-  maxIteration: 2
-};
-
-/**
- * 上传文件前置
- * @param file
- */
-async function beforeUpload(file: any) {
-  if (!window.FileReader) return false; // 判断是否支持FileReader
-  const compressedFile = await imageCompression(file, options);
-  const reader = new FileReader();
-  reader.readAsDataURL(compressedFile); // 文件转换
-  reader.onloadend = async function () {
-    if (fileList.value.length >= 5) {
-      message.error(t('comment.maxImageCount'));
-      return false;
-    }
-    fileList.value.push(reader.result);
-  };
-  return true;
-}
-
-/**
- *  自定义上传图片请求
- */
-async function customUploadRequest() {
-  imageList.value = fileList.value;
-}
-
-/**
- *  移除图片
- * @param index
- */
-async function removeBase64Image(index: number) {
-  fileList.value.splice(index, 1);
-  imageList.value.splice(index, 1);
-}
-
 /**
 *  回复提交 throttled
 */
@@ -208,7 +166,7 @@ async function replyReplySubmit(point: any) {
    message.error(t('comment.commentContentNotEmpty'));
    return;
  }
-  if (imageList.value.length > 3) {
+  if (comment.imageList.length > 3) {
    message.error(t('comment.maxImageCount'));
    return;
  }
@@ -218,7 +176,7 @@ async function replyReplySubmit(point: any) {
    user_id: user.user.uid,
    topic_id: topicId.value,
    content: content,
-    images: imageList.value,
+    images: comment.imageList,
    author: user.user.uid,
    reply_to: props.child.id,
    reply_id: props.item.id,
@@ -230,8 +188,7 @@ async function replyReplySubmit(point: any) {
  if (result.code === 200 && result.success) {

    replyReplyContent.value = "";
-    fileList.value = [];
-    imageList.value = [];
+    await comment.clearFileList();
    showSubmitCaptcha.value = false;
    await getReplyList();
    comment.closeReplyInput();