From 2ad6ef42474d27dc326b98d81839a95ed71b426c Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Fri, 14 Feb 2025 18:55:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E8=AE=A8=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/details.css  | 26 ++++++++++-----
 assets/css/details.less | 25 +++++++++-----
 composables/api.js      |  8 +++--
 pages/details/[id].vue  | 74 ++++++++++++++++++++++++++++++++---------
 4 files changed, 97 insertions(+), 36 deletions(-)

diff --git a/assets/css/details.css b/assets/css/details.css
index 90fade8..2f177f6 100644
--- a/assets/css/details.css
+++ b/assets/css/details.css
@@ -829,35 +829,43 @@
 .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box {
   position: relative;
 }
-.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .report-box {
-  display: flex;
+.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .operate-box {
+  display: block;
 }
 .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .menu-icon {
   width: 14px;
   height: 14px;
   cursor: pointer;
 }
-.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box {
+.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box {
   display: none;
+  flex-direction: column;
   position: absolute;
   top: 24px;
   right: 0;
-  width: 60px;
-  height: 24px;
-  background-color: #f6f6f6;
-  border: 1px solid #d7d7d7;
-  border-radius: 5px;
   font-size: 12px;
   color: #7f7f7f;
   cursor: pointer;
+  width: 60px;
+  z-index: 2;
+  border-radius: 5px;
+  background-color: #f6f6f6;
+  border: 1px solid #d7d7d7;
 }
-.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box::after {
+.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box .item {
+  height: 24px;
+}
+.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box .item:not(:last-of-type) {
+  border-bottom: 1px solid #d7d7d7;
+}
+.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box::after {
   content: "";
   width: 58px;
   height: 36px;
   position: absolute;
   top: -14px;
   right: 0;
+  z-index: -1;
 }
 .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .comment-icon {
   width: 14px;
diff --git a/assets/css/details.less b/assets/css/details.less
index 12a8511..ad909fd 100644
--- a/assets/css/details.less
+++ b/assets/css/details.less
@@ -980,8 +980,8 @@
                                 .menu-box {
                                     position: relative;
 
-                                    &:hover .report-box {
-                                        display: flex;
+                                    &:hover .operate-box {
+                                        display: block;
                                     }
 
                                     .menu-icon {
@@ -990,20 +990,26 @@
                                         cursor: pointer;
                                     }
 
-                                    .report-box {
+                                    .operate-box {
                                         display: none;
+                                        flex-direction: column;
                                         position: absolute;
                                         top: 24px;
                                         right: 0;
-                                        width: 60px;
-                                        height: 24px;
-                                        background-color: rgba(246, 246, 246, 1);
-                                        border: 1px solid rgba(215, 215, 215, 1);
-                                        border-radius: 5px;
                                         font-size: 12px;
                                         color: #7f7f7f;
                                         cursor: pointer;
-
+                                        width: 60px;
+                                        z-index: 2;
+                                        border-radius: 5px;
+                                        background-color: rgba(246, 246, 246, 1);
+                                        border: 1px solid rgba(215, 215, 215, 1);
+                                        .item {
+                                            height: 24px;
+                                            &:not(:last-of-type) {
+                                                border-bottom: 1px solid rgba(215, 215, 215, 1);
+                                            }
+                                        }
                                         &::after {
                                             content: "";
                                             width: 58px;
@@ -1011,6 +1017,7 @@
                                             position: absolute;
                                             top: -14px;
                                             right: 0;
+                                            z-index: -1;
                                         }
                                     }
                                 }
diff --git a/composables/api.js b/composables/api.js
index 45d18a6..f19a4c9 100644
--- a/composables/api.js
+++ b/composables/api.js
@@ -132,8 +132,12 @@ export const riposteDetailHttp = query => {
     return Http.post("/api/riposte/riposteDetail", query)
 }
 
-
 // 详情隐藏
 export const mjHideHttp = query => {
-    return Http.post("/api/interviewExperience/interviewExperienceHide", query)
+    return Http.post("/api/details/interviewExperienceHide", query)
+}
+
+// 评论相关 - 删除评论
+export const commentDeleteHttp = query => {
+    return Http.post("/api/comment/commentDelete", query)
 }
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index 1f24bf8..8b0d12d 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -211,7 +211,7 @@
                     </div>
                 </div>
 
-                <div v-if="emojiMaskState" class="emoji-box-mask" @click="closeEmojiMask()"></div>
+                <div v-if="emojiMaskState" class="emoji-box-mask" @click="closeEmoji()"></div>
 
                 <!-- 讨论 -->
                 <div class="comment-box" ref="commentBoxRef">
@@ -228,7 +228,7 @@
                     <div class="input-box">
                         <div class="top flexflex">
                             <img class="avatar" v-if="user.avatar" :src="user.avatar" />
-                            <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
+                            <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
                         </div>
                         <div class="picture-box" v-if="picture.url">
                             <div class="picture">
@@ -245,7 +245,7 @@
                                         <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
                                     </div>
                                 </div>
-                                <div class="item flexacenter">
+                                <div class="item flexacenter" @click="judgeLogin()">
                                     <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
                                     <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
                                     <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@@ -290,7 +290,12 @@
                                         <div class="comment-header-right flexacenter">
                                             <div class="menu-box flexacenter">
                                                 <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
-                                                <div class="report-box flexcenter" @click="report(item['token'])">举报</div>
+                                                <!-- <div class="report-box flexcenter" @click="report(item['token'])">举报</div> -->
+                                                <div class="operate-box">
+                                                    <div class="item flexcenter" @click="report(item['token'])">举报</div>
+                                                    <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="report(item['token'])">编辑</div>
+                                                    <div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
+                                                </div>
                                             </div>
                                             <img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                             <div class="flexacenter like-box" @click="commentLike(index)">
@@ -307,7 +312,8 @@
                                     <div class="input-box" v-if="item['childState']">
                                         <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
                                         <div class="top flexflex">
-                                            <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
+                                            <img class="avatar" v-if="user.avatar" :src="user.avatar" />
+                                            <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
                                         </div>
                                         <div class="picture-box" v-if="item.picture?.url">
                                             <div class="picture">
@@ -323,7 +329,7 @@
                                                         <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
                                                     </div>
                                                 </div>
-                                                <div class="item flexacenter">
+                                                <div class="item flexacenter" @click="judgeLogin()">
                                                     <input class="file" type="file" @change="handleFileUpload($event, index)" accept=".png, .jpg, .jpeg" />
                                                     <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
                                                     <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@@ -373,7 +379,12 @@
                                                     <div class="comment-header-right flexacenter">
                                                         <div class="menu-box flexacenter">
                                                             <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
-                                                            <div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
+                                                            <div class="operate-box">
+                                                                <div class="item flexcenter" @click="report(ite['token'])">举报</div>
+                                                                <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="report(ite['token'])">编辑</div>
+                                                                <div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(ite['token'], index, i)">删除</div>
+                                                            </div>
+                                                            <!-- <div class="report-box flexcenter" @click="report(ite['token'])">举报</div> -->
                                                         </div>
                                                         <img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                                         <div class="flexacenter like-box" @click="commentLike(index, i)">
@@ -408,7 +419,7 @@
                                                 <div class="input-box" v-if="ite['childState']">
                                                     <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
                                                     <div class="top flexflex">
-                                                        <textarea class="input-textarea flex1" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
+                                                        <textarea class="input-textarea flex1" maxlength="500" @focus="judgeLogin" :placeholder="'回复“' + (ite['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
                                                     </div>
                                                     <div class="picture-box" v-if="ite.picture?.url">
                                                         <div class="picture">
@@ -424,7 +435,7 @@
                                                                     <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
                                                                 </div>
                                                             </div>
-                                                            <div class="item flexacenter">
+                                                            <div class="item flexacenter" @click="judgeLogin()">
                                                                 <input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
                                                                 <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
                                                                 <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@@ -464,7 +475,7 @@
                         </el-popover>
                     </div>
 
-                    <div class="floor-centre flexflex flexacenter" @click="handleHide" v-if="permissions">
+                    <div class="floor-centre flexflex flexacenter" @click="handleHide" v-if="permissions.includes('mj.hide')">
                         <img class="icon" src="@/assets/img/set-icon.png" />
                         隐藏
                     </div>
@@ -1803,6 +1814,10 @@ const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰
 
 // 打开 Emoji
 const openEmoji = (index, i) => {
+    if (isNeedLogin.value) {
+        goLogin()
+        return
+    }
     if (i != undefined) commentList.value[index].child[i]["emojiState"] = true
     else if (index != undefined) commentList.value[index]["emojiState"] = true
     else {
@@ -1977,20 +1992,47 @@ const handleKeydown = event => {
     window.removeEventListener("keydown", handleKeydown) // 取消监听
 }
 
-let permissions = ref({})
+let permissions = ref([])
+
+onMounted(() => {
+    setTimeout(() => {
+        permissions.value = window["permissions"] || []
+    }, 1000)
+})
 
 // 点击隐藏
 const handleHide = () => {
     const userConfirmed = window.confirm("确定要隐藏该面经？")
-
-    console.log("userConfirmed", userConfirmed)
-
     if (!userConfirmed) return
+    mjHideHttp({ token })
+}
 
-    mjHideHttp({ token }).then(res => {
-        console.log("res", res)
+// 点击删除
+const commentDelete = (token, index, i) => {
+    commentDeleteHttp({
+        token,
+    }).then(res => {
+        if (res.code != 200) {
+            ElMessage.error(res.message)
+            return
+        }
+
+        if (i >= 0) {
+            commentList.value[index].child.splice(i, 1)
+            commentList.value[index].childnum -= 1
+            console.log("childnum", commentList.value[index])
+        } else {
+            commentComments.value -= commentList.value[index].childnum
+            commentList.value.splice(index, 1)
+        }
+
+        commentComments.value -= 1
     })
 }
+
+const judgeLogin = () => {
+    if (isNeedLogin.value) goLogin()
+}
 </script>
 
 <style lang="less" scoped>