feat:重构模块

src/components/Food/FoodRecipeList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="food-list card-item">
+    <el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>
+
+    <div v-else class="list">
+      <food-card v-for="(item, index) in foodStore.foodRecipeList"
+                 :key="index" :food-item="item"/>
+    </div>
+
+    <el-pagination
+        v-model:current-page="foodStore.pageInfo.currentPage"
+        :page-size="foodStore.pageInfo.pageSize"
+        layout="total, prev, pager, next"
+        :total="foodStore.pageInfo.totalSize"
+        @change="changePageEvent"
+    />
+
+    <el-button v-if="isLargeScreen()"
+               type="primary" :icon="Plus" circle
+               @click="addFoodRecipeClick" class="add-new" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import FoodCard from '@/components/Food/FoodCard.vue'
+import { useFoodStore } from '@/store/food.ts'
+import { isLargeScreen } from '@/utils'
+
+const foodStore = useFoodStore()
+
+const addFoodRecipeClick = () => {
+  foodStore.foodRecipeApiType = 'ADD'
+  foodStore.foodRecipeDialog = {
+    title: '新增菜谱',
+    visible: true,
+    data: foodStore.getEmptyFoodRecipe()
+  }
+}
+
+const changePageEvent = (value: number) => {
+  foodStore.pageInfo.currentPage = value
+  foodStore.queryFoodRecipeList()
+}
+</script>