feat:更新美食和旅游模块

src/components/Food/Form/FoodMaterialForm.vue

@@ -6,7 +6,7 @@
 
     <el-table :data="foodStore.currentFoodRecipe.materialList"
               border stripe class="material-table">
-      <el-table-column prop="type" label="类型" align="center" min-width="10%"/>
+      <el-table-column prop="type" label="类型" align="center" min-width="15%"/>
       <el-table-column prop="name" label="名称" align="center" min-width="20%"/>
       <el-table-column prop="amount" label="分量" align="center" min-width="20%"/>
       <el-table-column label="操作" align="center" width="100">

src/components/Travel/TravelCard.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="life-record-card card-item">
-    <el-carousel v-if="props.travelItem?.recordList.length > 0"
-                 arrow="always" @change="changeTravelEvent">
-      <el-carousel-item v-for="(item, index) in props.travelItem?.recordList" :key="index">
-        <el-image :src="AListUrl + item.imageList[0]"
-                  fit="contain" alt="暂无图片">
-          <template #error>
-            <div class="image-slot">
-              <span>暂无图片</span>
-            </div>
-          </template>
-        </el-image>
-      </el-carousel-item>
-    </el-carousel>
+    <el-image v-if="props.travelItem?.recordList.length > 0"
+              :src="AListUrl + props.travelItem?.recordList[0].imageList[0]"
+              :preview-src-list="previewImageList"
+              :initial-index="0"
+              show-progress
+              fit="contain" alt="暂无成果">
+      <template #error>
+        <div class="image-slot">
+          <span>暂无图片</span>
+        </div>
+      </template>
+    </el-image>
 
     <el-empty v-else description="暂无记录"/>
 
@@ -65,7 +64,7 @@
 import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
 import { useTravelStore } from '@/store/travel.ts'
 import { useAppStore } from '@/store/app.ts'
-import { defineProps, PropType, reactive } from 'vue'
+import { computed, defineProps, PropType, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { ITravelSpot } from '@/types/travel.ts'
@@ -88,6 +87,11 @@ const props = defineProps({
   }
 })
 
+const previewImageList = computed(() => {
+  return props.travelItem.recordList.flatMap((record) =>
+    record.imageList.map((item) => `${AListUrl}${item}`))
+})
+
 const editClick = async () => {
   const id = props.travelItem?.id
   travelStore.travelSpotApiType = 'UPDATE'