SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 update comment

Browse Source
This commit is contained in:
landaiqing
2024-10-02 01:08:29 +08:00
parent a626704b2b
commit 40f2f0b2de
8 changed files with 105 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/CommentReply/src/CommentInput/CommentInput.vue
View File

@@ -2,7 +2,7 @@
<div class="comment">
<AFlex :vertical="false">
<AFlex :vertical="true">
<AAvatar :size="50" shape="circle" src="https://api.multiavatar.com/Starcrasher.svg"/>
<AAvatar :size="50" class="comment-avatar" shape="circle" src="https://api.multiavatar.com/Starcrasher.svg"/>
</AFlex>
<AFlex :vertical="true" class="comment-content">
<ATextarea :rows="4" class="comment-text" @focus="onFocusHandler"
@@ -28,7 +28,8 @@
<AButton @click="insertEmoji(item.name)" type="text" shape="circle" size="large"
class="comment-emoji-item">
<template #icon>
<AAvatar shape="circle" size="default" :src="item.path"/>
<img :width="35" :height="35" loading="lazy" :src="item.path" v-lazy-load
:alt="item.name"/>
</template>
</AButton>
</template>
@@ -46,7 +47,8 @@
<AButton @click="insertEmoji(item.name)" type="text" shape="default" size="large"
class="comment-emoji-item" style="width: 75px;height: 75px;">
<template #icon>
<AAvatar shape="square" :size="70" :src="item.path"/>
<img :width="70" :height="70" loading="lazy" :src="item.path" v-lazy-load
:alt="item.name"/>
</template>
</AButton>
</template>
@@ -62,7 +64,7 @@
</AFlex>
<AFlex :vertical="false" align="center" class="comment-action-item">
<AUpload
:accept="'image/jpg, image/png, image/jpeg, image/gif, image/svg+xml, image/webp'"
:accept="'image/jpg, image/png, image/jpeg'"
name="images"
:max-count="3"
:multiple="true"
@@ -164,7 +166,13 @@ async function onFocusHandler() {
* @param emoji
*/
async function insertEmoji(emoji: string) {
commentContent.value += "[" + emoji + "]";
if (emojiType.value === "qq") {
commentContent.value += "[" + emoji + "]";
} else if (emojiType.value === "lottie") {
commentContent.value += ":" + emoji + ":";
} else {
return;
}
}
@@ -186,20 +194,18 @@ async function commentSubmit(point: any) {
return;
}
const content = commentContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)\]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (match, p1) => {
if (emojiType.value === "qq") {
return `<img style="width: 30px; height: 30px;" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
} else if (emojiType.value === "lottie") {
return `<img style="width: 80px; height: 80px;" src="/emoji/qq/lottie/${p1}" alt="emoji ${p1}" />`;
} else {
return match;
}
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (_match, p1) => {
return `<img style="width: 30px; height: 30px;" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const regexWithLottieEmoji = /:((1[0-0-8]|[1-9]?[0-9])\.gif):/g; // 匹配 :1.gif: 的字符串
const contentWithLottieEmoji = contentWithEmoji.replace(regexWithLottieEmoji, (_match, p1) => {
return `<img style="width: 80px; height: 80px;" loading="lazy" src="/emoji/qq/lottie/${p1}" alt="emoji ${p1}" />`;
});
const commentParams: object = {
user_id: user.user.uid,
topic_id: topicId.value,
content: contentWithEmoji,
content: contentWithLottieEmoji,
images: comment.imageList,
author: user.user.uid,
point: [point.x, point.y],

7
src/components/CommentReply/src/CommentInput/index.scss
View File

@@ -1,11 +1,16 @@
.comment-avatar {
cursor: pointer;
}
.comment-content {
margin-left: 20px;
.comment-text {
width: 600px;
}
.comment-editor{
.comment-editor {
border: 1px solid #d9d9d9;
border-radius: 8px;
padding: 10px;

2
src/components/CommentReply/src/CommentList/CommentList.vue
View File

@@ -26,7 +26,7 @@
<AFlex :vertical="false" style="margin-top: 5px">
<!-- 评论头像 -->
<AFlex :vertical="true" class="reply-avatar" v-if="item.avatar">
<AAvatar :size="50" shape="circle" :src="item.avatar"/>
<AAvatar :size="50" class="reply-avatar-img" shape="circle" :src="item.avatar"/>
</AFlex>
<!-- 评论内容 -->
<AFlex :vertical="true" class="reply-content">

4
src/components/CommentReply/src/CommentList/index.scss
View File

@@ -9,6 +9,10 @@
.reply-list {
margin-top: 30px;
.reply-avatar-img {
cursor: pointer;
}
.reply-pagination {
display: flex;
justify-content: flex-end;

32
src/components/CommentReply/src/ReplyInput/ReplyInput.vue
View File

@@ -37,7 +37,8 @@
<AButton @click="insertEmojiToReplyContent(item.name)" type="text" shape="circle" size="large"
class="comment-emoji-item">
<template #icon>
<AAvatar shape="circle" size="default" :src="item.path"/>
<img :width="35" :height="35" loading="lazy" :src="item.path" v-lazy-load
:alt="item.name"/>
</template>
</AButton>
</template>
@@ -56,7 +57,8 @@
size="large"
class="comment-emoji-item" style="width: 75px;height: 75px;">
<template #icon>
<AAvatar shape="square" :size="70" :src="item.path"/>
<img :width="70" :height="70" loading="lazy" :src="item.path" v-lazy-load
:alt="item.name"/>
</template>
</AButton>
</template>
@@ -73,7 +75,7 @@
</AFlex>
<AFlex :vertical="false" align="center" class="comment-action-item-reply">
<AUpload
:accept="'image/jpg, image/png, image/jpeg, image/gif, image/svg+xml, image/webp'"
:accept="'image/jpg, image/png, image/jpeg'"
name="images"
:max-count="3"
:multiple="true"
@@ -178,7 +180,13 @@ async function changeEmojiType(type: string) {
* @param emoji
*/
async function insertEmojiToReplyContent(emoji: string) {
replyContent.value += "[" + emoji + "]";
if (emojiType.value === "qq") {
replyContent.value += "[" + emoji + "]";
} else if (emojiType.value === "lottie") {
replyContent.value += ":" + emoji + ":";
} else {
return;
}
}
@@ -201,14 +209,12 @@ async function replySubmit(point: any) {
}
const content = replyContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)\]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (match, p1) => {
if (emojiType.value === "qq") {
return `<img style="width: 30px; height: 30px;" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
} else if (emojiType.value === "lottie") {
return `<img style="width: 80px; height: 80px;" src="/emoji/qq/lottie/${p1}" alt="emoji ${p1}" />`;
} else {
return match;
}
const contentWithEmoji = content.replace(regex, (_match, p1) => {
return `<img style="width: 30px; height: 30px;" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const regexWithLottieEmoji = /\:((1[0-0-8]|[1-9]?[0-9])\.gif)\:/g; // 匹配 :1.gif: 的字符串
const contentWithLottieEmoji = contentWithEmoji.replace(regexWithLottieEmoji, (_match, p1) => {
return `<img style="width: 80px; height: 80px;" loading="lazy" src="/emoji/qq/lottie/${p1}" alt="emoji ${p1}" />`;
});
const replyParams: {
images: any;
@@ -223,7 +229,7 @@ async function replySubmit(point: any) {
} = {
user_id: user.user.uid,
topic_id: topicId.value,
content: contentWithEmoji,
content: contentWithLottieEmoji,
images: comment.imageList,
author: user.user.uid,
reply_id: props.item.id,

41
src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
View File

@@ -37,10 +37,12 @@
</template>
<div style="width: 250px;height: 200px;overflow: auto;">
<template v-for="(item) in comment.emojiList" :key="item">
<AButton @click="insertEmojiToReplyReplyContent(item.name)" type="text" shape="circle" size="large"
<AButton @click="insertEmojiToReplyReplyContent(item.name)" type="text" shape="circle"
size="large"
class="comment-emoji-item">
<template #icon>
<AAvatar shape="circle" size="default" :src="item.path"/>
<img :width="35" :height="35" loading="lazy" :src="item.path" v-lazy-load
:alt="item.name"/>
</template>
</AButton>
</template>
@@ -55,10 +57,12 @@
<div style="width: 250px;height: 200px;overflow: auto;">
<AFlex :vertical="false" align="center" justify="space-between" wrap="wrap">
<template v-for="(item) in comment.lottieEmojiList" :key="item">
<AButton @click="insertEmojiToReplyReplyContent(item.name)" type="text" shape="default" size="large"
<AButton @click="insertEmojiToReplyReplyContent(item.name)" type="text" shape="default"
size="large"
class="comment-emoji-item" style="width: 75px;height: 75px;">
<template #icon>
<AAvatar shape="square" :size="70" :src="item.path"/>
<img :width="70" :height="70" loading="lazy" :src="item.path" v-lazy-load
:alt="item.name"/>
</template>
</AButton>
</template>
@@ -75,7 +79,7 @@
</AFlex>
<AFlex :vertical="false" align="center" class="comment-action-item-reply-child">
<AUpload
:accept="'image/jpg, image/png, image/jpeg, image/gif, image/svg+xml, image/webp'"
:accept="'image/jpg, image/png, image/jpeg'"
name="images"
:max-count="3"
:multiple="true"
@@ -183,12 +187,19 @@ const emojiType = ref<string>("qq");
async function changeEmojiType(type: string) {
emojiType.value = type;
}
/**
* 插入表情到回复内容
* @param emoji
*/
async function insertEmojiToReplyReplyContent(emoji: string) {
replyReplyContent.value += "[" + emoji + "]";
if (emojiType.value === "qq") {
replyReplyContent.value += "[" + emoji + "]";
} else if (emojiType.value === "lottie") {
replyReplyContent.value += ":" + emoji + ":";
} else {
return;
}
}
@@ -210,20 +221,18 @@ async function replyReplySubmit(point: any) {
return;
}
const content = replyReplyContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)\]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (match, p1) => {
if (emojiType.value === "qq") {
return `<img style="width: 30px; height: 30px;" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
} else if (emojiType.value === "lottie") {
return `<img style="width: 80px; height: 80px;" src="/emoji/qq/lottie/${p1}" alt="emoji ${p1}" />`;
} else {
return match;
}
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (_match, p1) => {
return `<img style="width: 30px; height: 30px;" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const regexWithLottieEmoji = /:((1[0-0-8]|[1-9]?[0-9])\.gif):/g; // 匹配 :1.gif: 的字符串
const contentWithLottieEmoji = contentWithEmoji.replace(regexWithLottieEmoji, (_match, p1) => {
return `<img style="width: 80px; height: 80px;" loading="lazy" src="/emoji/qq/lottie/${p1}" alt="emoji ${p1}" />`;
});
const replyParams: ReplyCommentParams = {
user_id: user.user.uid,
topic_id: topicId.value,
content: contentWithEmoji,
content: contentWithLottieEmoji,
images: comment.imageList,
author: user.user.uid,
reply_to: props.child.id,