msb-public
/
paopao-ce
mirror of https://github.com/rocboss/paopao-ce
1
0
Code Issues Projects Releases Wiki Activity

add comment upvote feature support (30%)

Browse Source
pull/275/head
Michael Li 2 years ago
parent 08e5a3f695
commit 30749adb11
No known key found for this signature in database
3 changed files with 129 additions and 24 deletions
Show Stats Download Patch File Download Diff File

25
web/src/components/comment-item.vue
Unescape View File

@ -24,12 +24,13 @@
<template #header-extra>
<div class="opt-wrap">
<span class="timestamp">
{{
{{ comment.ip_loc}}
<!-- {{
comment.ip_loc
? comment.ip_loc + ' · '
: comment.ip_loc
}}
{{ formatPrettyTime(comment.created_on, store.state.collapsedLeft) }}
{{ formatPrettyTime(comment.created_on, store.state.collapsedLeft) }} -->
</span>
<n-popconfirm
@ -74,6 +75,16 @@
<post-image
v-if="comment.imgs.length > 0"
:imgs="comment.imgs" />
<!-- 回复编辑器 -->
<compose-reply
ref="replyComposeRef"
:timestamp="comment.created_on"
:comment-id="comment.id"
:at-userid="replyAtUserID"
:at-username="replyAtUsername"
@reload="reload"
@reset="resetReply"
/>
<!-- 回复列表 -->
<div class="reply-wrap">
<reply-item
@ -84,16 +95,6 @@
@reload="reload"
/>
</div>
<!-- 回复编辑器 -->
<compose-reply
ref="replyComposeRef"
v-if="store.state.userInfo.id > 0"
:comment-id="comment.id"
:at-userid="replyAtUserID"
:at-username="replyAtUsername"
@reload="reload"
@reset="resetReply"
/>
</template>
</n-thing>
</div>

60
web/src/components/compose-reply.vue
Unescape View File

@ -1,10 +1,32 @@
<template>
<div class="reply-compose-wrap">
<div class="reply-switch">
<span class="show" v-if="!showReply" @click="switchReply(true)">
<span class="time-item">
{{ formatPrettyTime(timestamp, store.state.collapsedLeft) }}
</span>
<div
class="action-item hover"
@click.stop=""
>
<n-icon size="medium">
<thumb-up-outlined v-if="!hasUpvote" />
<thumb-up-twotone v-if="hasUpvote" color="#18a058" />
</n-icon>
<span class="upvote-count">1000</span>
</div>
<div
class="action-item hover"
@click.stop=""
>
<n-icon size="medium">
<thumb-down-outlined v-if="!hasDownvote" />
<thumb-down-twotone v-if="hasDownvote" color="#18a058" />
</n-icon>
</div>
<span class="show" v-if="store.state.userLogined && !showReply" @click="switchReply(true)">
回复
</span>
<span class="hide" v-if="showReply" @click="switchReply(false)">
<span class="hide" v-if="store.state.userLogined && showReply" @click="switchReply(false)">
取消
</span>
</div>
@ -40,18 +62,31 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useStore } from 'vuex';
import { formatPrettyTime } from '@/utils/formatTime';
import { createCommentReply } from '@/api/post';
import { InputInst } from 'naive-ui';
import {
ThumbUpTwotone,
ThumbUpOutlined,
ThumbDownTwotone,
ThumbDownOutlined,
} from '@vicons/material';
const hasUpvote = ref(false)
const hasDownvote = ref(true)
const props = withDefaults(defineProps<{
timestamp: number,
commentId: number,
atUserid: number,
atUsername: string,
}>(), {
timestamp: 0,
commentId: 0,
atUserid: 0,
atUsername: ''
});
const store = useStore();
const emit = defineEmits<{
(e: 'reload'): void,
(e: 'reset'): void
@ -95,10 +130,29 @@ defineExpose({ switchReply });
<style lang="less" scoped>
.reply-compose-wrap {
.reply-switch {
display: flex;
align-items: center;
text-align: right;
font-size: 12px;
margin: 10px 0;
.time-item {
font-size: 12px;
opacity: 0.75;
margin-right: 18px;
}
.action-item {
display: flex;
align-items: center;
margin-right: 18px;
opacity: 0.75;
.upvote-count {
margin-left: 4px;
font-size: 12px;
}
&.hover {
cursor: pointer;
}
}
.show {
color: #18a058;
cursor: pointer;

68
web/src/components/reply-item.vue
Unescape View File

@ -27,12 +27,13 @@
</router-link>
</div>
<div class="timestamp">
{{
{{ props.reply.ip_loc }}
<!-- {{
props.reply.ip_loc
? props.reply.ip_loc + ' · '
: props.reply.ip_loc
}}
{{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }}
}} -->
<!-- {{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }} -->
<n-popconfirm
v-if="
store.state.userInfo.is_admin ||
@ -58,18 +59,50 @@
<div class="base-wrap">
<div class="content">{{ props.reply.content }}</div>
<div class="reply-switch" v-if="store.state.userInfo.id > 0">
<span class="show" @click="focusReply"> 回复 </span>
<div class="reply-switch">
<span class="time-item">
{{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }}
</span>
<div
class="action-item hover"
@click.stop=""
>
<n-icon size="medium">
<thumb-up-outlined v-if="!hasUpvote" />
<thumb-up-twotone v-if="hasUpvote" color="#18a058" />
</n-icon>
<span class="upvote-count">100</span>
</div>
<div
class="action-item hover"
@click.stop=""
>
<n-icon size="medium">
<thumb-down-outlined v-if="!hasDownvote" />
<thumb-down-twotone v-if="hasDownvote" color="#18a058" />
</n-icon>
</div>
<span v-if="store.state.userLogined" class="show" @click="focusReply"> 回复 </span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useStore } from 'vuex';
import { Trash } from '@vicons/tabler';
import { formatPrettyTime } from '@/utils/formatTime';
import { deleteCommentReply } from '@/api/post';
import {
ThumbUpTwotone,
ThumbUpOutlined,
ThumbDownTwotone,
ThumbDownOutlined,
} from '@vicons/material';
const hasUpvote = ref(true)
const hasDownvote = ref(false)
const props = withDefaults(defineProps<{
reply: Item.ReplyProps,
@ -135,7 +168,7 @@ const execDelAction = () => {
}
}
.base-wrap {
display: flex;
display: block;
.content {
width: calc(100% - 40px);
margin-top: 4px;
@ -144,11 +177,28 @@ const execDelAction = () => {
line-height: 2;
}
.reply-switch {
width: 40px;
text-align: right;
display: flex;
align-items: center;
font-size: 12px;
margin: 10px 0 0;
.time-item {
font-size: 12px;
opacity: 0.75;
margin-right: 18px;
}
.action-item {
display: flex;
align-items: center;
margin-right: 18px;
opacity: 0.75;
.upvote-count {
margin-left: 4px;
font-size: 12px;
}
&.hover {
cursor: pointer;
}
}
.show {
color: #18a058;
cursor: pointer;

Write Preview
Loading…
Cancel
Save