add comment upvote feature support (30%)

web/src/components/comment-item.vue

@@ -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>

web/src/components/compose-reply.vue

@@ -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;

web/src/components/reply-item.vue

@@ -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">
+            <div class="reply-switch">
-                <span class="show" @click="focusReply"> 回复 </span>
+                <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;
+            display: flex;
-            text-align: right;
+            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;