Merge branch 'feat/interaction' into dev

Hazi7 · Nov 27, 2024 · 6624908 · 6624908
2 parents ea3dfa5 + c1f9240
commit 6624908
Show file tree

Hide file tree

Showing 16 changed files with 1,155 additions and 285 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.0",
+        "event-source-polyfill": "^1.0.31",
         "fs": "^0.0.1-security",
         "iconify-icon": "^2.1.0",
         "lucide-vue-next": "^0.456.0",
@@ -33,6 +34,7 @@
         "vee-validate": "^4.14.7",
         "vue": "^3.5.10",
         "vue-demi": "^0.14.10",
+        "vue-qqemoji-picker": "^2.0.8",
         "vue-router": "^4.4.5",
         "zod": "^3.23.8"
     },
@@ -41,6 +43,7 @@
         "@tsconfig/node20": "^20.1.4",
         "@types/bun": "latest",
         "@types/eslint-config-prettier": "^6.11.3",
+        "@types/event-source-polyfill": "^1.0.5",
         "@types/node": "^22.7.7",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/tsconfig": "^0.6.0",

diff --git a/src/components/comment/CommentForm.vue b/src/components/comment/CommentForm.vue
@@ -1,31 +1,27 @@
 <script setup lang="ts">
-import { ref,watch, computed, watchEffect, onMounted,onUnmounted } from 'vue';
+import { ref, watch, computed, watchEffect, onMounted, onUnmounted } from 'vue';
 import { useRequest } from '@/composables/useRequest';
 import { Icon } from '@iconify/vue';
 import { marked } from 'marked';
 import dompurify from 'dompurify';
-// import axios from 'axios';
 
-//定义一级评论的数据类型
+// 定义一级评论的数据类型
 interface CommentData {
     postId: number;
     commentText: string;
-    photoUrls: string[];
+    photoUrls: string[];  
     code?: number; 
 }
 
-// 使用useRequest获取请求相关数据和函数
-const { data, error,executeRequest } = useRequest<CommentData>();
-
+const { data, error, executeRequest } = useRequest<CommentData>();
 const commentText = ref<string>('');
-const postId = ref<number>(12);
+const postId = ref<number>(1);
 const maxLength = 1000;
 const remaining = computed(() => maxLength - commentText.value.length);
 const renderedContent = ref<string>('');
 const fileInput = ref<HTMLInputElement | null>(null);
-const imageTags = ref<string[]>([]);
-const photoUrls = ref<string[]>([]);
-
+const imageTags = ref<string[]>([]); 
+const photoUrls = ref<string[]>([]); 
 
 // 更新内容并限制最大长度
 watch(commentText, (newContent) => {
@@ -42,30 +38,37 @@ watchEffect(async () => {
 const uploadImg = () => {
   fileInput.value?.click();
 };
+// 处理文件选择
 const handleFileSelect = (event: Event) => {
   const files = (event.target as HTMLInputElement).files;
-  if (files && photoUrls.value.length < 3) {
-    Array.from(files).forEach((file) => {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const url = e.target?.result as string;
-        photoUrls.value.push(url); // 保存图片的data URL
-        const imgMarkdown = `![${file.name}](${url})`;
-        // 存储图片的Markdown格式
-        imageTags.value.push(imgMarkdown);
-      };
-      reader.readAsDataURL(file);
-    });
+  if (files && files.length > 0) {
+    const file = files[0];
+    if (photoUrls.value.length >= 1) {
+      console.log('只能上传一张图片');
+      return; 
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const url = e.target?.result as string;
+      photoUrls.value.push(url);  
+      const imgMarkdown = `![${file.name}](${url})`; 
+      imageTags.value = [imgMarkdown]; 
+    };
+    reader.readAsDataURL(file);
   }
 };
+
 // 删除图片
-const deleteImage = (index: number) => {
-  imageTags.value.splice(index, 1);
-  photoUrls.value.splice(index, 1);
+const deleteImage = () => {
+  photoUrls.value = []; 
+  imageTags.value = []; 
 };
+
+// 生命周期函数
 onMounted(() => {
   fileInput.value?.addEventListener('change', handleFileSelect);
 });
+
 onUnmounted(() => {
   if (fileInput.value) {
     fileInput.value.removeEventListener('change', handleFileSelect);
@@ -78,38 +81,37 @@ const submitComment = async () => {
     console.log('评论内容不能为空');
     return;
   }
-  const dataToSend = {
+  const requestData = {
     postId: postId.value,
     commentText: commentText.value,
-    photoUrls: photoUrls.value
+    photoUrls: photoUrls.value, 
   };
-  console.log(dataToSend);
-    await executeRequest({
-      url: `/comment/writePostComment`,
-      method: 'post',
-      requestData: dataToSend,
-    });
-    console.log(data.value, error);
-    if (data.value && data.value.code == 200) {
-      console.log('评论成功');
-      commentText.value = '';
-      photoUrls.value = [];
-      imageTags.value = [];
-    }else {
-      console.log('评论失败', error.value);
-   }
-}
-//获取一级评论
-async function getFirstComment() {
+
+  console.log('提交的请求数据:', requestData);
+  
+  // 发送请求
   await executeRequest({
-    url: `/comment/getCommentOne?postId=${postId.value}`,
-    method: 'get',
+    url: `/comment/writePostComment`,
+    method: 'post',
+    requestData,
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
   });
-  console.log(data.value);
-}
-getFirstComment()
+
+  console.log(data.value, error);
+  if (data.value?.code==200) {
+    console.log('评论成功');
+    commentText.value = '';
+    photoUrls.value = []; 
+    imageTags.value = []; 
+  } else {
+    console.log('评论失败', error.value);
+  }
+};
 </script>
 
+
 <template>
     <div class="comment-form">
       <!-- 评论输入框 -->
@@ -121,7 +123,7 @@ getFirstComment()
       <div class="image-preview">
         <div v-for="(imageTag, index) in imageTags" :key="index" class="image-tag">
             <img :src="imageTag.split('](')[1].slice(0, -1)" alt="uploaded-image" />
-            <div class="delete-btn" @click="deleteImage(index)"><Icon icon="iconoir:delete-circle" class="deleteIcon"/></div>
+            <div class="delete-btn" @click="deleteImage"><Icon icon="iconoir:delete-circle" class="deleteIcon"/></div>
         </div>
      </div>
       <!-- 尾部操作区域 -->
@@ -144,7 +146,6 @@ getFirstComment()
 </template>
 
   <style scoped lang="scss">
-  $whiteColor: white;
   .comment-form {
     border: 1px solid var(--border);
     border-radius: 10px;
@@ -162,7 +163,6 @@ getFirstComment()
        border-bottom: 1px solid var(--border);
        padding: 14px;
        font-size: 16px;
-       background-color: #fafafa;
        color: rgb(83, 82, 82);
     }
     .image-preview {
@@ -190,7 +190,7 @@ getFirstComment()
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: $whiteColor;
+        background-color: white;
         border-radius: 10px;
         display: none;
         cursor: pointer;
@@ -243,7 +243,7 @@ getFirstComment()
            width: 70px;
            height: 30px;
            background-color: #5dbee8;
-           color: $whiteColor;
+           color: white;
            border: none;
            font-size: 14px;
            border-radius:15px;