feat:增加菜谱显示模块

src/components/Food/FoodBasicData.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-basic"/>
+      <span class="sub-title">基础信息</span>
+    </div>
+
+    <div class="info food-basic-info">
+      <el-tag v-if="foodStore.currentRecipe.category">
+        {{ foodStore.currentRecipe.category }}
+      </el-tag>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SvgIcon } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodCard.vue

@@ -96,7 +96,7 @@ const getRecord = (recordList: IRecord[]) => {
 const editClick = async () => {
   const id = props.foodItem?.id
   foodStore.recipeApiType = 'UPDATE'
-  await foodStore.queryRecipe(id as number)
+  // await foodStore.queryRecipe(id as number)
   // foodStore.foodRecipeDialog = {
   //   title: '编辑菜谱',
   //   visible: true,
@@ -105,13 +105,13 @@ const editClick = async () => {
 }
 
 const viewClick = async () => {
-  await router.push({ name: 'MobileHomeFoodDetailId', params: { id: props.foodItem?.id } })
+  await router.push({ name: 'RecordDetailId', params: { id: props.foodItem?.id } })
 }
 
 const deleteClick = () => {
   foodStore.recipeApiType = 'DELETE'
   commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
-    foodStore.handleRecipeApi(props.foodItem)
+    // foodStore.handleRecipeApi(props.foodItem as IRecipe)
   })
 }
 

src/components/Food/FoodMaterialData.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-material"/>
+      <span class="sub-title">食材信息</span>
+    </div>
+
+    <div class="info material-info">
+      <div class="material-item">
+        <span class="material-title">主料</span>
+        <div v-if="getFoodMaterial('主料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('主料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+
+      <div class="material-item">
+        <span class="material-title">配料</span>
+        <div v-if="getFoodMaterial('辅料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('辅料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+
+      <div class="material-item">
+        <span class="material-title">辅料</span>
+        <div v-if="getFoodMaterial('调料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('调料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+
+const getFoodMaterial = (type: string) => {
+  return foodStore.currentRecipe.materialList.filter((item) => {
+    return item.type === type
+  })
+}
+</script>

src/components/Food/FoodMaterialForm.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food'
-import { IMaterial } from '@/types/food'
+import type { IMaterial } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 

src/components/Food/FoodOthersData.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-others"/>
+      <span class="sub-title">其他信息</span>
+    </div>
+
+    <div class="others-info">
+      <span class="others-title">备注：</span>
+      <span v-if="foodStore.currentRecipe.remark">
+        {{ foodStore.currentRecipe.remark }}
+      </span>
+      <span v-else>
+        无
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodRecordData.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="info-item">
+    <div class="title-info">
+      <svg-icon name="home-work"/>
+      <span class="sub-title">成果展示</span>
+    </div>
+
+    <div v-if="foodStore.currentRecipe.recordList.length > 0" class="info record-info">
+      <el-timeline>
+        <el-timeline-item v-for="(item, index) in foodStore.currentRecipe.recordList"
+                          :key="index" :timestamp="item.date" placement="top">
+          <el-card class="record-card">
+            <span class="record-content">完成人：{{ item.person }}</span>
+            <el-image v-if="item.imageUrl"
+                      :src="serviceFileRootPath + item.imageUrl"
+                      :preview-src-list="[serviceFileRootPath + item.imageUrl]"
+                      fit="contain" alt="暂无图片" class="record-image"/>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+    <el-empty v-else description="暂无成果"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { serviceFileRootPath } from '@/utils'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodStepData.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-step"/>
+      <span class="sub-title">菜谱信息</span>
+    </div>
+
+    <div class="step-info">
+      <div v-for="(item, index) in foodStore.currentRecipe.stepList"
+           :key="index" class="step-container">
+        <span class="step-number">第{{ index + 1 }}步</span>
+        <div class="step-body">
+          <span class="step-content">{{ item.content }}</span>
+          <img v-if="item.imageUrl"
+               :src="serviceFileRootPath + item.imageUrl" alt="暂无图片" class="step-image"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { serviceFileRootPath } from '@/utils'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodStepForm.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food'
-import { IStep } from '@/types/food'
+import type { IStep } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { serviceFileRootPath } from '@/utils'

src/components/Food/FoodTimeline.vue

@@ -3,6 +3,7 @@
     <el-date-picker
         v-model="currentYear"
         type="year" placeholder="请选择年份"
+        :editable="false"
         style="width: 100px;"
         @change="changeDateEvent"
     />

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
 }