A1300399510/PC-mj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新讨论

Browse Source
This commit is contained in:
A1300399510 2025-02-14 18:55:06 +08:00
parent 8fbda2d907
commit 2ad6ef4247
4 changed files with 97 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/details.css
View File

@ -829,35 +829,43 @@
.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box { .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box {
position: relative; position: relative;
} }
.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .report-box { .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .operate-box {
display: flex; display: block;
} }
.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .menu-icon { .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .menu-icon {
width: 14px; width: 14px;
height: 14px; height: 14px;
cursor: pointer; 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; display: none;
flex-direction: column;
position: absolute; position: absolute;
top: 24px; top: 24px;
right: 0; right: 0;
width: 60px;
height: 24px;
background-color: #f6f6f6;
border: 1px solid #d7d7d7;
border-radius: 5px;
font-size: 12px; font-size: 12px;
color: #7f7f7f; color: #7f7f7f;
cursor: pointer; 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: ""; content: "";
width: 58px; width: 58px;
height: 36px; height: 36px;
position: absolute; position: absolute;
top: -14px; top: -14px;
right: 0; right: 0;
z-index: -1;
} }
.content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .comment-icon { .content .right .comment-box .comment-list .comment-item .comment-content .comment-header .comment-header-right .comment-icon {
width: 14px; width: 14px;

25
assets/css/details.less
View File

@ -980,8 +980,8 @@
.menu-box { .menu-box {
position: relative; position: relative;
&:hover .report-box { &:hover .operate-box {
display: flex; display: block;
} }
.menu-icon { .menu-icon {
@ -990,20 +990,26 @@
cursor: pointer; cursor: pointer;
} }
.report-box { .operate-box {
display: none; display: none;
flex-direction: column;
position: absolute; position: absolute;
top: 24px; top: 24px;
right: 0; 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; font-size: 12px;
color: #7f7f7f; color: #7f7f7f;
cursor: pointer; 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 { &::after {
content: ""; content: "";
width: 58px; width: 58px;
@ -1011,6 +1017,7 @@
position: absolute; position: absolute;
top: -14px; top: -14px;
right: 0; right: 0;
z-index: -1;
} }
} }
} }

8
composables/api.js
View File

@ -132,8 +132,12 @@ export const riposteDetailHttp = query => {
return Http.post("/api/riposte/riposteDetail", query) return Http.post("/api/riposte/riposteDetail", query)
} }
// 详情隐藏 // 详情隐藏
export const mjHideHttp = 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)
} }

74
pages/details/[id].vue
View File

@ -211,7 +211,7 @@
</div> </div>
</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"> <div class="comment-box" ref="commentBoxRef">
@ -228,7 +228,7 @@
<div class="input-box"> <div class="input-box">
<div class="top flexflex"> <div class="top flexflex">
<img class="avatar" v-if="user.avatar" :src="user.avatar" /> <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>
<div class="picture-box" v-if="picture.url"> <div class="picture-box" v-if="picture.url">
<div class="picture"> <div class="picture">
@ -245,7 +245,7 @@
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div> <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
</div> </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" /> <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="" /> <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span> <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@ -290,7 +290,12 @@
<div class="comment-header-right flexacenter"> <div class="comment-header-right flexacenter">
<div class="menu-box flexacenter"> <div class="menu-box flexacenter">
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" /> <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> </div>
<img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" /> <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)"> <div class="flexacenter like-box" @click="commentLike(index)">
@ -307,7 +312,8 @@
<div class="input-box" v-if="item['childState']"> <div class="input-box" v-if="item['childState']">
<img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" /> <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
<div class="top flexflex"> <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>
<div class="picture-box" v-if="item.picture?.url"> <div class="picture-box" v-if="item.picture?.url">
<div class="picture"> <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 class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
</div> </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" /> <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="" /> <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span> <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@ -373,7 +379,12 @@
<div class="comment-header-right flexacenter"> <div class="comment-header-right flexacenter">
<div class="menu-box flexacenter"> <div class="menu-box flexacenter">
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" /> <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> </div>
<img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" /> <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)"> <div class="flexacenter like-box" @click="commentLike(index, i)">
@ -408,7 +419,7 @@
<div class="input-box" v-if="ite['childState']"> <div class="input-box" v-if="ite['childState']">
<img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" /> <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
<div class="top flexflex"> <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>
<div class="picture-box" v-if="ite.picture?.url"> <div class="picture-box" v-if="ite.picture?.url">
<div class="picture"> <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 class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
</div> </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" /> <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="" /> <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
<span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span> <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
@ -464,7 +475,7 @@
</el-popover> </el-popover>
</div> </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" /> <img class="icon" src="@/assets/img/set-icon.png" />
隐藏 隐藏
</div> </div>
@ -1803,6 +1814,10 @@ const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰
// 打开 Emoji // 打开 Emoji
const openEmoji = (index, i) => { const openEmoji = (index, i) => {
if (isNeedLogin.value) {
goLogin()
return
}
if (i != undefined) commentList.value[index].child[i]["emojiState"] = true if (i != undefined) commentList.value[index].child[i]["emojiState"] = true
else if (index != undefined) commentList.value[index]["emojiState"] = true else if (index != undefined) commentList.value[index]["emojiState"] = true
else { else {
@ -1977,20 +1992,47 @@ const handleKeydown = event => {
window.removeEventListener("keydown", handleKeydown) // 取消监听 window.removeEventListener("keydown", handleKeydown) // 取消监听
} }
let permissions = ref({}) let permissions = ref([])
onMounted(() => {
setTimeout(() => {
permissions.value = window["permissions"] || []
}, 1000)
})
// 点击隐藏 // 点击隐藏
const handleHide = () => { const handleHide = () => {
const userConfirmed = window.confirm("确定要隐藏该面经？") const userConfirmed = window.confirm("确定要隐藏该面经？")
console.log("userConfirmed", userConfirmed)
if (!userConfirmed) return 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> </script>
<style lang="less" scoped> <style lang="less" scoped>