配方管理界面

src/components/feed/RecipeTable.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-table 
+    :data="recipes" 
+    style="width: 100%"
+    :fit="true"
+    table-layout="auto"
+    row-key="id"
+    :highlight-current-row="false"
+    :scrollbar-always-on="true"
+  >
+    <el-table-column prop="id" label="ID" min-width="80" />
+    <el-table-column prop="name" label="配方名" min-width="150" />
+    <el-table-column label="原料种类数" min-width="120">
+      <template #default="scope">
+        {{ scope.row.recipe_ingredients ? scope.row.recipe_ingredients.length : 0 }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="description" label="配方简介" min-width="200" />
+    <el-table-column label="操作" min-width="150" align="center">
+      <template #default="scope">
+        <el-button size="small" @click="$emit('edit', scope.row)">编辑</el-button>
+        <el-button size="small" type="danger" @click="$emit('delete', scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'RecipeTable',
+  props: {
+    recipes: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  emits: ['edit', 'delete']
+};
+</script>