feat:移植工程

src/views/home/life/food[id].vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="life-detail">
+    <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>
+
+    <el-button type="primary" class="back-button" @click="backClick">返回</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { useRouter, useRoute } from 'vue-router'
+import FoodBasicData from '@/components/Home/Food/Data/FoodBasicData.vue'
+import FoodMaterialData from '@/components/Home/Food/Data/FoodMaterialData.vue'
+import FoodStepData from '@/components/Home/Food/Data/FoodStepData.vue'
+import FoodOthersData from '@/components/Home/Food/Data/FoodOthersData.vue'
+import FoodRecordData from '@/components/Home/Food/Data/FoodRecordData.vue'
+import { onMounted } from 'vue'
+
+const foodStore = useFoodStore()
+const router = useRouter()
+const route = useRoute()
+
+onMounted(() => {
+  foodStore.queryFoodRecipe(route.params.id as number)
+})
+
+const backClick = () => {
+  router.push({ path: '/home/life/food' })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.detail.module.scss";
+</style>