feat:重构模块

src/views/food/detail[id].vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="life-detail common-mobile-view">
+    <span class="title">{{ foodStore.currentFoodRecipe.name }}</span>
+
+    <section>
+      <div class="info-container">
+        <food-basic-data/>
+
+        <food-material-data/>
+
+        <food-step-data/>
+
+        <food-others-data/>
+      </div>
+
+      <div class="record-container card-item">
+        <food-record-data/>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { useAppStore } from '@/store/app.ts'
+import { useRoute } from 'vue-router'
+import FoodBasicData from '@/components/Food/Data/FoodBasicData.vue'
+import FoodMaterialData from '@/components/Food/Data/FoodMaterialData.vue'
+import FoodStepData from '@/components/Food/Data/FoodStepData.vue'
+import FoodOthersData from '@/components/Food/Data/FoodOthersData.vue'
+import FoodRecordData from '@/components/Food/Data/FoodRecordData.vue'
+import { onMounted } from 'vue'
+
+const foodStore = useFoodStore()
+const appStore = useAppStore()
+const route = useRoute()
+
+onMounted(() => {
+  appStore.isShowMobileBack = true
+  foodStore.queryFoodRecipe(route.params.id as number)
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.detail.module";
+</style>