feat:增加菜谱显示模块

src/components/Moment/MomentCard.vue

@@ -9,9 +9,10 @@
       <el-image style="width: 200px; height: 200px"
                 src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
 
-      <p>{{ props.item.date }}</p>
+      <p>{{ formatTimeAgo(props.item.date) }}</p>
 
       <div class="button-container">
+        <el-button :icon="Edit" circle size="small" @click="editClick()"/>
         <el-button circle size="small">
           <i class="fa-regular fa-thumbs-up"></i>
         </el-button>
@@ -26,7 +27,6 @@
             v-model="momentInfo.comment"
             maxlength="100" placeholder="平等表达 友善交流"
             show-word-limit type="textarea" :rows="3"
-            @blur="momentInfo.isShowComment = false"
         />
 
         <el-popover ref="emojiPopoverRef" placement="bottom" :width="300" trigger="click">
@@ -44,11 +44,11 @@
 
         <el-button type="primary"
                    :disabled="momentInfo.comment.length === 0"
-                   @click="sendCommentClick"
+                   @click="sendCommentClick()"
                    class="send-button">发送</el-button>
       </div>
 
-      <div class="moment-comment-list">
+      <div v-if="props.item.commentList.length > 0" class="moment-comment-list">
         <div v-for="(comment, index) in props.item.commentList" :key="index"
              class="moment-comment-item">
           <span class="name">{{ comment.username }}：</span>
@@ -63,9 +63,15 @@
 import EmojiPicker from 'vue3-emoji-picker'
 import 'vue3-emoji-picker/css'
 import { Edit } from '@element-plus/icons-vue'
-import { defineProps, PropType, reactive } from 'vue'
-import { IMoment } from '@/types/food'
+import { defineProps, reactive } from 'vue'
+import type { PropType } from 'vue'
+import type { IMoment } from '@/types/food'
 import { serviceFileRootPath } from '@/utils'
+import { formatTimeAgo } from '@/utils/dateUtils'
+import { useFoodStore } from '@/store/food'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const props = defineProps({
   item: {
@@ -74,16 +80,26 @@ const props = defineProps({
   }
 })
 
+const foodStore = useFoodStore()
+
 const momentInfo = reactive({
   isShowComment: false,
   comment: ''
 })
 
-const onSelectEmoji = (emoji) => {
+const editClick = () => {
+  foodStore.momentApiType = 'UPDATE'
+  foodStore.currentMoment = props.item as IMoment
+  router.push('/moment/momentForm')
+}
 
+const onSelectEmoji = (emoji) => {
+  momentInfo.comment += emoji.i
 }
 
 const sendCommentClick = async () => {
+  await foodStore.addComment(props.item?.id as number, momentInfo.comment)
+
   momentInfo.comment = ''
   momentInfo.isShowComment = false
 }