From 62819bdc69eb0cb82206b60293e2787ca29ee520 Mon Sep 17 00:00:00 2001
From: Lansong <2095621390@qq.com>
Date: Sat, 13 Apr 2024 10:34:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E5=9B=9E=E5=A4=8D=E5=8A=9F=E8=83=BD,=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=8F=B3=E9=94=AE=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                         |   9 ++
 src/components/navigation.vue        |   1 +
 src/store/index.ts                   |   3 +-
 src/utils/consts.ts                  |   1 +
 src/utils/request.ts                 |   1 -
 src/utils/type.ts                    |  22 +++-
 src/views/personal/drawer.vue        |  11 +-
 src/views/personal/fileOption.vue    |  29 ++++--
 src/views/personal/files.vue         |  48 +++++----
 src/views/personal/path.vue          |   1 +
 src/views/personal/personal.vue      |  45 +++++---
 src/views/personal/popup.vue         |  32 +-----
 src/views/personal/recycle-title.vue |  16 ++-
 src/views/personal/recycle.vue       |   5 +
 src/views/personal/utils.ts          |  86 ++--------------
 src/views/posts/comment.vue          | 147 +++++++++++++--------------
 16 files changed, 221 insertions(+), 236 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1568c5..4f9f2f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+
+## 2024-04-13
+
+### ✨ Features | 新功能
+
+* 实现评论回复功能
+
+* 实现右键部分功能
+
 ## 2024-04-11
 
 ### ✨ Features | 新功能
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
index ef75b7b..3ca1858 100644
--- a/src/components/navigation.vue
+++ b/src/components/navigation.vue
@@ -82,6 +82,7 @@ const props = defineProps(['link'])
 watch(() => props.link, (newVal) => {
     if (newVal) {
         fatherId.value = newVal
+        console.log("!!!")
         router.push('/personal/' + newVal)
     }
 })
diff --git a/src/store/index.ts b/src/store/index.ts
index 413aa1e..a1dbb17 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -28,11 +28,10 @@ export const useStore = defineStore('user', {
                 spaceSize: "",
                 md5: "",
                 isDel: 0,
-                zone: "",
-                subZone: "",
                 description: "",
                 updateAt: "",
                 createAt: "",
+                isChoose: false,
             }
         }
     },
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index b43f71e..4e916ea 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -120,6 +120,7 @@ export const GetSlidersUrl = "/system/getSliders"
 
 export const GetCommentsUrl = "/comment/getComments"
 export const CreateCommentUrl = "/comment/createComment"
+export const GetCommentBlocksUrl = "/comment/getCommentBlocks"
 // ----------------------------------------Storage----------------------------------------------------------------------
 
 export const StorageDoGetUser = "DoGetUser" // 是否获取过用户信息
diff --git a/src/utils/request.ts b/src/utils/request.ts
index c24da2b..5ca5d3f 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -68,7 +68,6 @@ service.interceptors.response.use(
     endLoading()
     const status = error.response.status
     if (status === 401) {
-      console.log("shuaxin")
       if (localStorage.getItem(StorageAutoLogin) === "true") {//自动登录情况
         const longToken = localStorage.getItem(StorageLongToken)
         if (longToken) {
diff --git a/src/utils/type.ts b/src/utils/type.ts
index da834f5..663652f 100644
--- a/src/utils/type.ts
+++ b/src/utils/type.ts
@@ -121,20 +121,33 @@ export type SimpleUser =  {
     url: string,
 }
 export type Comment =  {
-    id: string,
+    commentId: string,
     subjectId: string,
     rootId: string,
     fatherId: string,
     count: number,
     state: number,
     attrs: number,
-    tags: string[],
+    labels: string[],
     author: SimpleUser,
     atUserId: string,
     content: string,
     meta: string,
     createTime: 0,
-    like: 0
+    like: 0,
+    commentRelation: {
+        liked: boolean,
+        hated: boolean
+    }
+}
+
+export type CommentBlock = {
+    comment: Comment,
+    replyList: {
+        comments: Comment[],
+        total: number
+        token: string
+    }
 }
 
 // 文件信息
@@ -151,4 +164,5 @@ export type File =  {
     updateAt: string;
     createAt: string;
     isChoose: boolean;
-}
\ No newline at end of file
+}
+
diff --git a/src/views/personal/drawer.vue b/src/views/personal/drawer.vue
index 5e4fa62..6a02ecf 100644
--- a/src/views/personal/drawer.vue
+++ b/src/views/personal/drawer.vue
@@ -195,6 +195,8 @@ watch(selectType, (newVal) => {
     }
     else {
         const pathList = (sessionStorage.getItem(StoragePathId) as string).split("/")
+        console.log(sessionStorage.getItem(StoragePathId) as string)
+        console.log(pathList)
         router.push('/personal/' + pathList[pathList.length - 1])
         emit('sendDrawerOptions', 'showFiles')
         emit('sendDrawerSelectType', newVal)
@@ -205,6 +207,9 @@ watch(() => props.sendRequest, () => {
     if (props.sendRequest.option === 'createFolder') {
         isShowCreateFolder.value = true
     }
+    else if(props.sendRequest.option === 'uploadFile') {
+      // uploadFiles($event)
+    }
 })
 
 const getSelectType = () => {
@@ -244,11 +249,10 @@ const createFolder = () => {
             spaceSize: getFileSize(data.spaceSize),
             md5: data.md5,
             isDel: 0,
-            zone: "",
-            subZone: "",
             description: "",
             createAt: new Date().toLocaleString(),
             updateAt: new Date().toLocaleString(),
+            isChoose: false,
         }
         isShowCreateFolder.value = false
         // newFolderName.value = res.name
@@ -294,11 +298,10 @@ const uploadFiles = (event: any) => {
                         spaceSize: getFileSize(file.size),
                         md5,
                         isDel: 0,
-                        zone: "",
-                        subZone: "",
                         description: "",
                         createAt: new Date().toLocaleString(),
                         updateAt: new Date().toLocaleString(),
+                        isChoose: false,
                     }
                     filesCount.value--
                     if (filesCount.value === 0) {
diff --git a/src/views/personal/fileOption.vue b/src/views/personal/fileOption.vue
index 4dcf9d6..e000348 100644
--- a/src/views/personal/fileOption.vue
+++ b/src/views/personal/fileOption.vue
@@ -1,22 +1,24 @@
 <template>
     <div class="file-option-box">
-        <div class="create-folder" @click="createFolder">新建文件夹</div>
-        <div class="upload-file">上传文件</div>
-        <div class="upload-folder">上传文件夹</div>
+        <div class="create-folder" @click="createFolder" v-if="!props.AllSelect">新建文件夹</div>
+        <div class="upload-file" @click="uploadFile" v-if="!props.AllSelect">上传文件</div>
+        <div class="upload-folder" v-if="!props.AllSelect">上传文件夹</div>
         <div class="line"></div>
         <div class="all-select" @click="allSelect">全选</div>
         <div class="download">下载</div>
         <div class="recycle" @click="moveToRecycle">移至回收站</div>
-        <div class="delete">彻底删除</div>
+        <div class="delete" @click="cleanOut">彻底删除</div>
         <div class="line"></div>
-        <div class="refresh">刷新页面</div>
+        <div class="refresh" @click="flashPage">刷新页面</div>
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import {ref, watch} from 'vue'
 
 const emit = defineEmits(['sendFilePopupOptions'])
-
+const props = defineProps<{
+  AllSelect: boolean,
+}>()
 const allSelect = () => {
     emit('sendFilePopupOptions', 'allSelect')
 }
@@ -26,6 +28,19 @@ const moveToRecycle = () => {
 const createFolder = () => {
     emit('sendFilePopupOptions', "createFolder")
 }
+
+const flashPage = () => {
+  emit('sendFilePopupOptions', "flashPage")
+}
+
+const uploadFile = () => {
+  emit('sendFilePopupOptions', "uploadFile")
+}
+
+const cleanOut = () => {
+  emit('sendFilePopupOptions', "cleanOutFile")
+}
+
 </script>
 <style scoped lang="css">
 .file-option-box {
diff --git a/src/views/personal/files.vue b/src/views/personal/files.vue
index 876ec7e..b9fb909 100644
--- a/src/views/personal/files.vue
+++ b/src/views/personal/files.vue
@@ -104,23 +104,7 @@ const props = defineProps<{
 }>()
 //存储页面文件列表
 const nowFilesList = ref<responsePrivateFilesList>({
-    files: [
-        {
-            fileId: '',
-            userId: '',
-            name: '',
-            type: '',
-            path: '',
-            fatherId: '',
-            spaceSize: '',
-            isDel: 0,
-            zone: '',
-            subZone: '',
-            description: '',
-            updateAt: '',
-            createAt: '',
-        }
-    ],
+    files: [],
     total: 0,
     token: '',
     fatherIdPath: '',
@@ -130,6 +114,7 @@ const nowFilesList = ref<responsePrivateFilesList>({
 
 onMounted(async() => {
     fatherId.value = getPersonalFatherId()
+    console.log(fatherId.value)
     if (fatherId.value !== 'recycle') {
         nowFilesList.value = await getPrivateFilesList({
             limit: 100,
@@ -138,6 +123,7 @@ onMounted(async() => {
             backward: true,
             onlyFatherId: fatherId.value
         })
+        console.log(nowFilesList.value)
         sessionStorage.setItem(StoragePathId, nowFilesList.value.fatherIdPath)
         sessionStorage.setItem(StoragePathName, nowFilesList.value.fatherNamePath)
         emit('loading', true)
@@ -164,9 +150,12 @@ onBeforeRouteUpdate(async(to) => {
 })
 
 watch(() => store.tempFileData, (newVal) => {
+  console.log("change!!!")
+  console.log(nowFilesList.value.files);
+  console.log(newVal)
     nowFilesList.value.files.unshift(newVal)
-    console.log(nowFilesList.value.files);
-    
+  console.log(nowFilesList.value.files);
+
 })
 watch(() => props.sendRequest, async() => {
   switch (props.sendRequest.option) {
@@ -222,6 +211,24 @@ watch(() => props.sendRequest, async() => {
         emit('sendOptions', props.sendRequest.option)
         emit('sendDetails', fileDetails.value)
         break
+    case 'flashPage':
+      fatherId.value = getPersonalFatherId()
+        nowFilesList.value = await getPrivateFilesList({
+          limit: 100,
+          offset: 0,
+          sortType: sortType.value,
+          backward: true,
+          onlyFatherId: fatherId.value
+        })
+        sessionStorage.setItem(StoragePathId, nowFilesList.value.fatherIdPath)
+        sessionStorage.setItem(StoragePathName, nowFilesList.value.fatherNamePath)
+        emit('loading', true)
+        break
+    case 'cleanOutFile':
+      getRecycleFileDetails()
+      emit('sendOptions', props.sendRequest.option)
+      emit('sendDetails', fileDetails.value)
+      break
     default:
         console.log('其他操作')
         break
@@ -304,11 +311,10 @@ const dropUploadFile = (event: any) => {
                     spaceSize: getFileSize(file.size),
                     md5,
                     isDel: 0,
-                    zone: "",
-                    subZone: "",
                     description: "",
                     createAt: new Date().toLocaleString(),
                     updateAt: new Date().toLocaleString(),
+                    isChoose: false,
                 }
             })
         })
diff --git a/src/views/personal/path.vue b/src/views/personal/path.vue
index 5d33b95..534b067 100644
--- a/src/views/personal/path.vue
+++ b/src/views/personal/path.vue
@@ -205,6 +205,7 @@ const clickSort = () => {
     isShowSort.value = !isShowSort.value
 }
 const toPath = (index: number) => {
+    console.log("!!!")
     router.push({name: 'personal', params: {fatherId: pathData.value.pathId[index]}})
 }
 
diff --git a/src/views/personal/personal.vue b/src/views/personal/personal.vue
index 6e8d731..40d66ae 100644
--- a/src/views/personal/personal.vue
+++ b/src/views/personal/personal.vue
@@ -22,6 +22,7 @@
                     class="file-options"
                     :style="{left: filePopupLeft + 'px', top: filePopupTop + 'px'}"
                     @sendFilePopupOptions = "getFilePopupOptionType"
+                    :AllSelect="AllSelect"
                 ></FileOption>
                 <Files 
                     v-if="isShowFiles"
@@ -55,6 +56,7 @@ import FileOption from './fileOption.vue'
 import router from '@/router'
 import { ref } from 'vue'
 import {StoragePathId} from "@/utils/consts";
+import {send} from "vite";
 const RecycleMsg = ref({
     option: "",
     message: "",
@@ -68,17 +70,7 @@ const requestDrawerMessage = ref({
 })
 const fileContents = ref({
     option: "",
-    contents: [{
-        fileId: "",
-        userId: "",
-        name: "",
-        type: "",
-        path: "",
-        fatherId: "",
-        spaceSize: "",
-        createAt: "",
-        updateAt: ""
-    }]
+    contents: [],
 })
 
 const requestPathMessage = ref({
@@ -93,12 +85,13 @@ const isShowPopup = ref(false)
 const isClickFile = ref(false)
 const isShowFiles = ref(!location.href.includes('recycle'))
 let isFirst = false
-
+const AllSelect = ref<boolean>(false)
 const getPathMsg = (sendPathMsg: any) => {
     requestMessage.value = {
         option: sendPathMsg.option,
         message: sendPathMsg.message
     }
+    AllSelect.value = !AllSelect.value
 }
 
 const getFilePopupOptionType = (sendFilePopupOptions: string) => {
@@ -122,6 +115,23 @@ const getFilePopupOptionType = (sendFilePopupOptions: string) => {
             option: sendFilePopupOptions
         }
     }
+    else if(sendFilePopupOptions === 'flashPage') {
+      requestMessage.value = {
+        option: sendFilePopupOptions,
+        message: ""
+      }
+    }
+    else if(sendFilePopupOptions === 'uploadFile') {
+      requestDrawerMessage.value = {
+        option: sendFilePopupOptions
+      }
+    }
+    else if(sendFilePopupOptions === 'cleanOutFile') {
+      requestMessage.value = {
+        option: sendFilePopupOptions,
+        message: ""
+      }
+    }
 }
 
 const showFileOperation = (e: any) => {
@@ -153,12 +163,17 @@ const showFileOperation = (e: any) => {
     })
 }
 
-const getRecycleTitleOptions = (sendRecycleTitleOptions: string) => {
-    if(sendRecycleTitleOptions === 'cleanOutRecycle') {
+const getRecycleTitleOptions = (sendRecycleTitleOptions: any) => {
+    if(sendRecycleTitleOptions.option === 'cleanOutRecycle') {
       RecycleMsg.value = {
-        option: sendRecycleTitleOptions,
+        option: sendRecycleTitleOptions.option,
         message: "",
       }
+    } else if(sendRecycleTitleOptions.option === 'AllSelect') {
+      RecycleMsg.value = {
+        option: sendRecycleTitleOptions.option,
+        message: (sendRecycleTitleOptions.msg !== true) ? "true": "false",
+      }
     }
 }
 const getDrawerOptionType = (sendDrawerOptions: string) => {
diff --git a/src/views/personal/popup.vue b/src/views/personal/popup.vue
index 151e5fd..3072263 100644
--- a/src/views/personal/popup.vue
+++ b/src/views/personal/popup.vue
@@ -139,7 +139,7 @@ import {getPrivateFilesList, postCreateFile, postMoveFile, postDeleteFile, postC
 import type { responsePrivateFilesList, requestCreateFile } from './utils'
 import { errorMsg, successMsg } from '@/utils/message';
 import {StoragePathId, StoragePathName} from "@/utils/consts";
-
+import type {File} from "@/utils/type"
 const emit = defineEmits(['sendOperations', 'sendRenameMsg'])
 const renameMsg = ref({
     fileId: "",
@@ -148,17 +148,7 @@ const renameMsg = ref({
 const props = defineProps<{
     sendContents: {
         option: string,
-        contents: {
-            fileId: string,
-            userId: string,
-            name: string,
-            type: string,
-            path: string,
-            fatherId: string,
-            spaceSize: string,
-            createAt: string,
-            updateAt: string
-        }[]
+        contents: File[]
     }
 }>()
 const details = ref("")
@@ -168,23 +158,7 @@ const isMoveCreateFolder = ref(false)
 const detailsTop = ref(0)
 const detailsLeft = ref(0)
 const foldersList = ref<responsePrivateFilesList>({
-    files: [
-        {
-            fileId: '',
-            userId: '',
-            name: '',
-            type: '',
-            path: '',
-            fatherId: '',
-            spaceSize: '',
-            isDel: 0,
-            zone: '',
-            subZone: '',
-            description: '',
-            updateAt: '',
-            createAt: '',
-        }
-    ],
+    files: [],
     total: 0,
     token: '',
     fatherIdPath: '',
diff --git a/src/views/personal/recycle-title.vue b/src/views/personal/recycle-title.vue
index 0001aeb..4819d80 100644
--- a/src/views/personal/recycle-title.vue
+++ b/src/views/personal/recycle-title.vue
@@ -13,6 +13,8 @@
                     <input 
                         type="checkbox"
                         id="recycleAllSelect"
+                        v-model="selectCheck"
+                        @click="AllSelect"
                     >全选
                 </label>
             </div>
@@ -31,14 +33,26 @@
 import {post} from "@/utils/request";
 import {successMsg} from "@/utils/message";
 import {EmptyRecycleBinUrl} from "@/utils/consts";
+import {ref} from "vue";
+const selectCheck = ref<Boolean>(false)
 const emit = defineEmits(['sendRecycleTitleOptions'])
 const cleanOutRecycle = () => {
   post(false, EmptyRecycleBinUrl)
       .then(() => {
         successMsg('成功清空回收站')
-        emit('sendRecycleTitleOptions', "cleanOutRecycle")
+        emit('sendRecycleTitleOptions', {
+          option: "cleanOutRecycle",
+          msg: "",
+        })
       })
 }
+
+const AllSelect = () => {
+  emit('sendRecycleTitleOptions', {
+    option: "AllSelect",
+    msg: selectCheck.value,
+  })
+}
 </script>
 
 <style scoped lang="css">
diff --git a/src/views/personal/recycle.vue b/src/views/personal/recycle.vue
index 52ea5e8..894266b 100644
--- a/src/views/personal/recycle.vue
+++ b/src/views/personal/recycle.vue
@@ -81,8 +81,13 @@ const cancelShowPop = (e: MouseEvent) => {
 }
 
 watch(() => props.RecycleMsg, () => {
+  console.log(props.RecycleMsg.option)
   if(props.RecycleMsg.option == "cleanOutRecycle") {
     recycleFilesList.value.files = [];
+  } else if(props.RecycleMsg.option == "AllSelect") {
+    recycleFilesList.value.files.forEach(file => {
+      file.isChoose = props.RecycleMsg.message === "true";  // 将每个元素的 isChoose 属性设置为 true
+    });
   }
 })
 
diff --git a/src/views/personal/utils.ts b/src/views/personal/utils.ts
index 7510d7c..dabb3c9 100644
--- a/src/views/personal/utils.ts
+++ b/src/views/personal/utils.ts
@@ -9,28 +9,11 @@ import {
     DeleteFileUrl,
     GetPrivateFilesUrl,
     GetRecycleBinFilesUrl,
-    MoveFileUrl
+    MoveFileUrl, StoragePath
 } from "@/utils/consts";
-
+import type {File} from "@/utils/type"
 //------------------------------------------------------------interface
 
-// 文件信息
-interface File {
-    fileId: string;
-    userId: string;
-    name: string;
-    type: string;
-    path: string;
-    fatherId: string;
-    spaceSize: string;
-    isDel: number;
-    zone: string;
-    subZone: string;
-    description: string;
-    updateAt: string;
-    createAt: string;
-    isChoose: boolean;
-}
 
 //搜索/查看用户文件列表的参数
 export interface requestPrivateFilesList {
@@ -48,25 +31,10 @@ export interface requestPrivateFilesList {
     onlyFatherId?: string;
 }
 
+
 //搜索/查看用户文件列表的返回
 export interface responsePrivateFilesList {
-    files: [
-        {
-            fileId: string,
-            userId: string,
-            name: string,
-            type: string,
-            path: string
-            fatherId: string,
-            spaceSize: string,
-            isDel: number,
-            zone: string,
-            subZone: string,
-            description: string,
-            updateAt: string,
-            createAt: string,
-        }
-    ],
+    files: File[],
     total: number,
     token: string,
     fatherIdPath: string,
@@ -91,8 +59,6 @@ export interface fileData {
     fatherId: string,
     spaceSize: string,
     isDel: number,
-    zone: string,
-    subZone: string,
     description: string,
     updateAt: string,
     createAt: string,
@@ -158,24 +124,7 @@ export const postDeleteFile = async(fileIds: string[]):Promise<void> => {
 //查看回收站文件列表的请求URL
 export const getRecycleFilesList = async(params: requestPrivateFilesList): Promise<responseRecycleFilesList> => {
     const filesList = ref<responseRecycleFilesList>({
-        files: [
-            {
-                fileId: "",
-                userId: "",
-                name: "",
-                type: "",
-                path: "",
-                fatherId: "",
-                spaceSize: "",
-                isDel: 0,
-                zone: "",
-                subZone: "",
-                description: "",
-                updateAt: "",
-                createAt: "",
-                isChoose: false 
-            }
-        ],
+        files: [],
         total: 0,
         token: "",
     })
@@ -211,36 +160,19 @@ export const postCreateFile = async(data: requestCreateFile):Promise<any> => {
     const fileId = ref<string>("")
     await post(true, CreateFileUrl, data)
     .then((res: any) => {
-        fileId.value = res.id
+        fileId.value = res.fileId
         data.name = res.name
     })
     return {
         fileId: fileId.value,
         name: data.name
-    
     }
 }
 
 //请求搜索/查看用户文件列表
 export const getPrivateFilesList = async(params: requestPrivateFilesList): Promise<responsePrivateFilesList> => {
     const filesList = ref<responsePrivateFilesList>({
-        files: [
-            {
-                fileId: "",
-                userId: "",
-                name: "",
-                type: "",
-                path: "",
-                fatherId: "",
-                spaceSize: "",
-                isDel: 0,
-                zone: "",
-                subZone: "",
-                description: "",
-                updateAt: "",
-                createAt: "",
-            }
-        ],
+        files: [],
         total: 0,
         token: "",
         fatherIdPath: "",
@@ -250,13 +182,12 @@ export const getPrivateFilesList = async(params: requestPrivateFilesList): Promi
     .then ((res: any) => {
         filesList.value = {
             files: res.files.map((file: any) => ({
-                fileId: file.id,
+                fileId: file.fileId,
                 userId: file.userId,
                 name: file.name,
                 type: file.type,
                 path: `${res.fatherNamePath}/${file.name}`,
                 fatherId: file.fatherId,
-                md5: file.md5,
                 updateAt: turnTime(file.updateAt),
                 createAt: turnTime(file.createAt),
                 spaceSize: getFileSize(file.spaceSize),
@@ -266,6 +197,7 @@ export const getPrivateFilesList = async(params: requestPrivateFilesList): Promi
             fatherIdPath: res.fatherIdPath,
             fatherNamePath: res.fatherNamePath
         }
+        sessionStorage.setItem(StoragePath, res.fatherNamePath)
     })
     return filesList.value
 }
diff --git a/src/views/posts/comment.vue b/src/views/posts/comment.vue
index 7c62634..b85d187 100644
--- a/src/views/posts/comment.vue
+++ b/src/views/posts/comment.vue
@@ -13,85 +13,73 @@
             <input
                 type="text"
                 placeholder="写下你的评论吧~"
-                @keyup.enter="submitComment"
+                @keyup.enter="submitComment(postId,postId,postId, content, userId)"
                 v-model="content"
             >
         </div>
         <div class="comment-list" >
             <div
                 class="comment-item"
-                v-for="(comment, index) in commentList"
+                v-for="(commentBlock, index) in commentList"
                 :key="index"
             >
                 <div class="image">
-                    <img :src="comment.author.url" alt="">
+                    <img :src="commentBlock.comment.author.url" alt="">
                 </div>
                 <div
                     class="comment-detail">
-                    <p class="name" @click="enterUser(comment.author.userId)">{{comment.author.name}}</p>
-                    <p class="comment">{{comment.content}}</p>
+                    <p class="name" @click="enterUser(commentBlock.comment.author.userId)">{{commentBlock.comment.author.name}}</p>
+                    <p class="comment">{{commentBlock.comment.content}}</p>
                     <div class="footer">
-                        <span class="time">{{turnTime(comment.createTime)}}</span>
+                        <span class="time">{{turnTime(commentBlock.comment.createTime)}}</span>
                         <span class="agree">
                             <i class="iconfont icon-appreciate_light"></i>
-                            <span>{{ comment.like }}</span>
+                            <span>{{ commentBlock.comment.like }}</span>
                         </span>
-                        <span class="disagree">
-                            <i class="iconfont icon-oppose_light"></i>
-                            <span>888</span>
-                        </span>
-                        <span>回复</span>
+<!--                        <span class="disagree">-->
+<!--                            <i class="iconfont icon-oppose_light"></i>-->
+<!--                            <span>colabels</span>-->
+<!--                        </span>-->
+                        <span @click="replyComment(commentBlock.comment.commentId, commentBlock.comment.commentId, commentBlock.comment.author.userId)">回复</span>
                     </div>
-                    <div class="reply-item">
+                    <div class="reply-item" v-for="(reply, index) in commentBlock.replyList.comments">
                         <div class="image">
-                            <img src="" alt="">
+                            <img :src="reply.author.url" alt="">
                         </div>
                         <div class="reply-detail">
                             <div class="reply">
-                                <span class="name">admin</span>
-                                <span class="contents">这是一条回复</span>
+                                <span class="name">{{ reply.author.name }}</span>
+                                <span class="contents">{{reply.content}}</span>
                             </div>
                             <div class="footer">
-                                <span class="time">2024-04-03 17:01</span>
+                                <span class="time">{{turnTime(reply.createTime)}}</span>
                                 <span class="agree">
                                     <i class="iconfont icon-appreciate_light"></i>
-                                    <span>888</span>
+                                    <span>{{ reply.like }}</span>
                                 </span>
                                 <span class="disagree">
                                     <i class="iconfont icon-oppose_light"></i>
                                     <span>888</span>
                                 </span>
-                                <span>回复</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="reply-item">
-                        <div class="image">
-                            <img src="" alt="">
-                        </div>
-                        <div class="reply-detail">
-                            <div class="reply">
-                                <span class="name">admin</span>
-                                <span class="contents">这是一条回复</span>
-                            </div>
-                            <div class="footer">
-                                <span class="time">2024-04-03 17:01</span>
-                                <span class="agree">
-                                    <i class="iconfont icon-appreciate_light"></i>
-                                    <span>888</span>
-                                </span>
-                                <span class="disagree">
-                                    <i class="iconfont icon-oppose_light"></i>
-                                    <span>888</span>
-                                </span>
-                                <span>回复</span>
+                                <span @click="replyComment(reply.commentId, commentBlock.comment.commentId, reply.author.userId)">回复</span>
                             </div>
                         </div>
                     </div>
                     <div class="more-comments">
-                        <span>共18条回复,</span>
+                        <span>共{{commentBlock.replyList.total}}条回复,</span>
                         <span class="more">查看更多</span>
                     </div>
+                  <div class="my-comment" v-if="commentBlock.comment.commentId === replyRootId">
+                    <div class="image">
+                      <img :src="store.getUserAvatar()" alt="">
+                    </div>
+                    <input
+                        type="text"
+                        placeholder="写下你的评论吧~"
+                        @keyup.enter="submitComment(postId,commentBlock.comment.commentId, replyCommentId, subContent, replyAtUserId)"
+                        v-model="subContent"
+                    >
+                  </div>
                 </div>
             </div>
         </div>
@@ -100,17 +88,22 @@
 <script setup lang="ts">
 import {onMounted, ref, watch} from 'vue'
 import {useStore} from "@/store";
-import {CreateCommentUrl, GetCommentsUrl} from "@/utils/consts";
+import {CreateCommentUrl, GetCommentBlocksUrl, GetCommentsUrl} from "@/utils/consts";
 import {get, post} from "@/utils/request";
-import type {Comment} from "@/utils/type"
+import type {CommentBlock} from "@/utils/type"
 import {enterUser, turnTime} from "@/utils/utils";
 import {errorMsg} from "@/utils/message";
+import {root} from "postcss";
 const store = useStore()
-const commentList = ref<Comment[]>([])
+const commentList = ref<CommentBlock[]>([])
 const content = ref<string>('')
 const postId = ref<string>('')
 const userId = ref<string>('')
 const commentCount = ref<number>(0)
+const replyCommentId = ref<string>("")
+const replyRootId = ref<string>("")
+const subContent = ref<string>("")
+const replyAtUserId = ref<string>("")
 const props = defineProps<{
   PostData: {
     PostId: string,
@@ -118,57 +111,61 @@ const props = defineProps<{
     CommentCount: number,
   }
 }>()
-
 onMounted(async () => {
+
 })
 
 watch(() => props.PostData.PostId, async () => {
   postId.value = props.PostData.PostId
   userId.value = props.PostData.UserId
   commentCount.value = props.PostData.CommentCount
-  commentList.value = await getComment(postId.value)
+  commentList.value = await getComments(postId.value)
 })
 
-const getComment = async (fatherId: string) => {
-  const comments = ref<Comment[]>([])
-  await get(false, `${GetCommentsUrl}?onlyFatherId=${fatherId}`)
+const replyComment = (replyId: string, rootId: string, atUserId: string) => {
+  console.log(replyCommentId.value, replyRootId.value)
+  if(replyCommentId.value === "") {
+    replyCommentId.value = replyId
+    replyRootId.value = rootId
+    replyAtUserId.value = atUserId
+  } else {
+    replyCommentId.value = ''
+    replyRootId.value = ''
+    replyAtUserId.value = ''
+  }
+  console.log(replyCommentId.value, replyRootId.value)
+
+}
+
+const getComments = async(fatherId: string) => {
+  const comments = ref<CommentBlock[]>([])
+  await get(false, `${GetCommentBlocksUrl}?fatherId=${fatherId}&subjectId=${fatherId}`)
       .then((res: any) => {
-        comments.value =  res.comments.map((comment:any) => ({
-          id: comment.id,
-          subjectId: comment.subjectId,
-          rootId: comment.rootId,
-          fatherId: comment.fatherId,
-          count: comment.count,
-          state: comment.state,
-          attrs: comment.attrs,
-          tags: comment.tags,
-          author: comment.author,
-          atUserId: comment.atUserId,
-          content: comment.content,
-          meta: comment.meta,
-          createTime: comment.createTime,
-          like: comment.like
+        comments.value =  res.commentBlocks.map((commentBlock:any) => ({
+          comment: commentBlock.rootComment,
+          replyList: commentBlock.replyList,
         }))
       })
   return comments.value
 }
 
-const submitComment = async () => {
-  if(content.value === '') {
+
+const submitComment = async (subjectId: string,rootId: string, fatherId: string, cnt: string, atUserId: string) => {
+  if(cnt === '') {
     errorMsg('评论内容不能为空')
     return
   }
   await post(true, `${CreateCommentUrl}`, {
-      subjectId: postId.value,
-      rootId: postId.value,
-      fatherId: postId.value,
-      content: content.value,
-      atUserId: userId.value,
+      subjectId: subjectId,
+      rootId: rootId,
+      fatherId: fatherId,
+      content: cnt,
+      atUserId: atUserId,
   })
       .then(async () => {
         content.value = '';
-        commentCount.value ++
-        commentList.value = await getComment(postId.value)
+        commentCount.value ++;
+        commentList.value = await getComments(postId.value)
       })
 }
 </script>