feat:移植工程

src/components/Home/Food/Data/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.currentFoodRecipe.materialList.filter((item) => {
+    return item.type === type
+  })
+}
+</script>