feat:增加后端接口

src/components/Food/FoodCard.vue

@@ -44,10 +44,6 @@
         </div>
 
         <div v-if="props.foodItem?.recordList.length > 0" class="info-list">
-          <div class="info-item">
-            <i class="fa-solid fa-flag"></i>
-            {{ props.foodItem.recordList[foodCardInfo.currentFoodIndex].person}}
-          </div>
           <div class="info-item">
             <i class="fa-regular fa-calendar-check"></i>
             {{ formatDate(props.foodItem.recordList[foodCardInfo.currentFoodIndex].date) }}
@@ -73,7 +69,6 @@ import { formatDate } from 'vue3-common/utils/dateUtil'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { serviceFileRootPath } from '@/utils'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 
 const router = useRouter()
 const foodStore = useFoodStore()
@@ -116,7 +111,7 @@ const viewFoodRecipeClick = async () => {
 const deleteFoodRecipeClick = () => {
   foodStore.foodRecipeApiType = 'DELETE'
   commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
-    foodStore.handleFoodRecipeApi(props.foodItem?.id as number)
+    foodStore.handleFoodRecipeApi(props.foodItem)
   })
 }
 

src/components/Food/FoodDaily.vue

@@ -20,7 +20,10 @@ const calendarRef = ref()
 const foodStore = useFoodStore()
 const appStore = useAppStore()
 
-onMounted(() => {
+onMounted(async () => {
+  foodStore.queryDateType = 'month'
+  await foodStore.refreshInfo()
+
   const { month } = foodStore.queryRecord
   calendarRef.value.move(new Date(month))
 })

src/components/Food/FoodDailyItem.vue

@@ -6,15 +6,13 @@
 
     <div class="daily-list">
       <daily-card v-for="(item, index) in dailyItemInfo.itemList"
-                  :key="index" @click="selectFoodRecordClick(item)"
-                  :title="item.name" :content="item.category">
+                  :key="index" :title="item.name" :content="item.category">
         <template #icon>
           <el-avatar>{{ item.category.charAt(0) }}</el-avatar>
         </template>
 
         <template #extra>
-          <span>{{ item.person }}</span>
-          <span>{{ item.date }}</span>
+          <el-button type="primary" :icon="CaretRight" circle @click="selectFoodRecordClick(item)"/>
         </template>
       </daily-card>
     </div>
@@ -22,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import { CaretRight } from '@element-plus/icons-vue'
 import DailySummary from '@/components/DailySummary.vue'
 import DailyCard from '@/components/DailyCard.vue'
 import { defineProps, onMounted, reactive, watch } from 'vue'
@@ -83,11 +82,11 @@ const getFoodDailyByDate = (date: string) => {
  * @param foodRecord 美食记录
  */
 const selectFoodRecordClick = async (foodRecord: IFoodRecord) => {
-  foodStore.foodRecordApiType = 'UPDATE'
+  // foodStore.foodRecordApiType = 'UPDATE'
 
-  appStore.isShowMobileBack = true
-  foodStore.currentFoodRecord = foodRecord
-  await router.push({ name: 'MobileHomeFoodRecordForm' })
+  // appStore.isShowMobileBack = true
+  // foodStore.currentFoodRecord = foodRecord
+  // await router.push({ name: 'MobileHomeFoodRecordForm' })
 }
 </script>
 
@@ -95,13 +94,13 @@ const selectFoodRecordClick = async (foodRecord: IFoodRecord) => {
 .food-daily-item {
   display: flex;
   flex-direction: column;
-  gap: 1vh;
-  padding: 1vh 0.5vw;
+  gap: 10px;
+  padding: 5px;
 
   .daily-list {
     display: flex;
     flex-direction: column;
-    gap: 1vh;
+    gap: 10px;
     overflow: auto;
   }
 }

src/components/Food/FoodRecipe.vue

@@ -3,7 +3,7 @@
     <div class="query-item card-item">
       <span>分类：</span>
       <el-segmented v-model="foodStore.queryRecipe.category"
-                    :options="foodCategoryList"
+                    :options="queryCategoryList"
                     @change="queryFoodSegmented"/>
     </div>
 
@@ -25,29 +25,41 @@ import FoodCard from '@/components/Food/FoodCard.vue'
 import ArriveBottom from '@/components/ArriveButton.vue'
 import { useFoodStore } from '@/store/food.ts'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import type { ICategory } from '@/types'
 
 const foodRecipeRef = ref()
 const foodStore = useFoodStore()
 
-const foodCategoryList = [{
-  label: '全部',
-  value: ''
-},
-{
-  label: '家常菜',
-  value: '家常菜'
-}]
+const queryCategoryList = ref([] as ICategory[])
 
 onMounted(async () => {
-  foodRecipeRef.value.addEventListener('scroll', handleScroll)
+  await foodStore.queryFoodCategory()
+  initCategoryList()
+  // foodStore.foodRecipeList = []
+  await foodStore.refreshInfo()
+  // foodRecipeRef.value.addEventListener('scroll', handleScroll)
 })
 
 onBeforeUnmount(() => {
-  foodRecipeRef.value.removeEventListener('scroll', handleScroll)
+  // foodRecipeRef.value.removeEventListener('scroll', handleScroll)
 })
 
+const initCategoryList = () => {
+  queryCategoryList.value = []
+  queryCategoryList.value.push({
+    label: '全部',
+    value: ''
+  })
+  foodStore.foodCategoryList.forEach((item) => {
+    queryCategoryList.value.push({
+      label: item,
+      value: item
+    })
+  })
+}
+
 const queryFoodSegmented = async () => {
-  foodStore.pageInfo.currentPage = 1
+  // foodStore.pageInfo.currentPage = 1
   foodStore.foodRecipeList = []
   await foodStore.queryFoodRecipeList()
 }
@@ -70,6 +82,7 @@ const handleScroll = () => {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  overflow: auto;
 
   .query-item {
     padding: 5px 10px;

src/components/Food/FoodTimeline.vue

@@ -12,7 +12,7 @@
                         :key="index" :timestamp="formatDate(item.date)" placement="top">
         <div class="timeline-info card-item">
           <span>{{ item.name }}</span>
-          <el-image :src="item.imageUrl"
+          <el-image :src="serviceFileRootPath + item.imageUrl"
                     fit="contain" alt="暂无成果">
             <template #error>
               <div class="image-slot">
@@ -24,30 +24,26 @@
       </el-timeline-item>
     </el-timeline>
 
-    <el-empty v-else description="暂无日记"/>
+    <el-empty v-else description="暂无记录"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
 import { onMounted, ref } from 'vue'
-import { formatDate, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
+import { formatDate } from 'vue3-common/utils/dateUtil'
 import { serviceFileRootPath } from '@/utils'
 
 const currentYear = ref(new Date())
 const foodStore = useFoodStore()
 
 onMounted(async () => {
-  const dateInfo = getStartEndDate(getCurrentYear(), 'year')
-  foodStore.queryDateList[0] = dateInfo[0]
-  foodStore.queryDateList[1] = dateInfo[1]
+  foodStore.queryDateType = 'year'
   await foodStore.refreshInfo()
 })
 
 const changeDateEvent = async (value: Date) => {
-  const dateInfo = getStartEndDate(value, 'year')
-  foodStore.queryDateList[0] = dateInfo[0]
-  foodStore.queryDateList[1] = dateInfo[1]
+  foodStore.queryRecord.year = String(value.getFullYear())
   await foodStore.refreshInfo()
 }
 </script>
@@ -69,6 +65,10 @@ const changeDateEvent = async (value: Date) => {
       display: flex;
       flex-direction: column;
       gap: 10px;
+
+      .el-image {
+        height: 300px;
+      }
     }
   }
 }