From 1b8bd5a7e2b68800a6cb9f3eb69541f16c8f7839 Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Mon, 9 Feb 2026 23:16:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0=E7=BE=8E=E9=A3=9F?=
 =?UTF-8?q?=E5=92=8C=E6=97=85=E6=B8=B8=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Food/Form/FoodMaterialForm.vue |   2 +-
 src/components/Travel/TravelCard.vue          |  32 +++---
 src/layout/TabBar.vue                         |   5 +
 src/styles/home/life.detail.module.scss       |   2 +-
 src/styles/mobile.home.layout.module.scss     |   7 ++
 src/types/travel.ts                           |  26 ++---
 src/views/anniversary/detail[id].vue          |   3 +-
 src/views/asset/detail[id].vue                |   3 +-
 src/views/bill/detail[id].vue                 |   3 +-
 src/views/food/recipeForm.vue                 |   8 +-
 src/views/food/recordForm.vue                 |   3 +-
 src/views/food/timeline.vue                   | 107 ++++++++++++++++++
 src/views/journal/detail[id].vue              |   3 +-
 src/views/ledger/detail[id].vue               |   3 +-
 src/views/meta.ts                             |   4 +
 src/views/product/detail[id].vue              |   3 +-
 src/views/travel/recordForm.vue               |   3 +-
 src/views/travel/spotForm.vue                 |   3 +-
 18 files changed, 179 insertions(+), 41 deletions(-)
 create mode 100644 src/views/food/timeline.vue

diff --git a/src/components/Food/Form/FoodMaterialForm.vue b/src/components/Food/Form/FoodMaterialForm.vue
index f3db96e..d0d62b3 100644
--- a/src/components/Food/Form/FoodMaterialForm.vue
+++ b/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">
diff --git a/src/components/Travel/TravelCard.vue b/src/components/Travel/TravelCard.vue
index 8438433..c20dda7 100644
--- a/src/components/Travel/TravelCard.vue
+++ b/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'
diff --git a/src/layout/TabBar.vue b/src/layout/TabBar.vue
index 3de05ba..a4e8437 100644
--- a/src/layout/TabBar.vue
+++ b/src/layout/TabBar.vue
@@ -31,6 +31,11 @@
       <i class="fa-solid fa-utensils"></i>
       <span>菜谱</span>
     </router-link>
+    <router-link v-if="path.includes('food')" to="/food/timeline"
+                 @click="routerClick()" class="item">
+      <i class="fa-solid fa-timeline"></i>
+      <span>时间轴</span>
+    </router-link>
     <router-link v-if="path.includes('food')" to="/food/record"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-calendar-days"></i>
diff --git a/src/styles/home/life.detail.module.scss b/src/styles/home/life.detail.module.scss
index 4ddded4..9290c2c 100644
--- a/src/styles/home/life.detail.module.scss
+++ b/src/styles/home/life.detail.module.scss
@@ -98,7 +98,7 @@
         margin-left: 1vw;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        // justify-content: space-between;
         gap: 1vh;
         min-height: 28vh;
 
diff --git a/src/styles/mobile.home.layout.module.scss b/src/styles/mobile.home.layout.module.scss
index 357d534..9780670 100644
--- a/src/styles/mobile.home.layout.module.scss
+++ b/src/styles/mobile.home.layout.module.scss
@@ -223,4 +223,11 @@ $tabBar-height: 70px;
     border-radius: 10px;
     // box-shadow: 3px 3px 3px #CFCFCF;
   }
+
+  .form-item {
+    padding: 10px;
+    background-color: var(--color-card-bg);
+    border: 1px solid var(--color-border-bg);
+    border-radius: 10px;
+  }
 }
diff --git a/src/types/travel.ts b/src/types/travel.ts
index 58ed93d..a5be74d 100644
--- a/src/types/travel.ts
+++ b/src/types/travel.ts
@@ -1,3 +1,16 @@
+/**
+ * 旅行景点
+ */
+export interface ITravelRecord {
+  id: number;
+  name: string;
+  area: string[];
+  date: string;
+  persons: string[];
+  imageList: string[];
+  videoList: string[];
+}
+
 /**
  * 景点信息
  */
@@ -16,19 +29,6 @@ export interface ITravelSpot {
   recordList: ITravelRecord[];
 }
 
-/**
- * 旅行景点
- */
-export interface ITravelRecord {
-  id: number;
-  name: string;
-  area: string[];
-  date: string;
-  persons: string[];
-  imageList: string[];
-  videoList: string[];
-}
-
 /**
  * 统计信息
  */
diff --git a/src/views/anniversary/detail[id].vue b/src/views/anniversary/detail[id].vue
index 6c61c5f..ad4aa78 100644
--- a/src/views/anniversary/detail[id].vue
+++ b/src/views/anniversary/detail[id].vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-anniversary-detail common-mobile-view">
     <el-form ref="formRef" :model="anniversaryStore.currentAnniversary"
-             :rules="rules" label-width="60px">
+             :rules="rules" label-position="top" label-width="60px"
+             class="form-item">
       <el-form-item label="标题" prop="title">
         <el-input v-model="anniversaryStore.currentAnniversary.title" autocomplete="off"
                   placeholder="请输入标题" clearable
diff --git a/src/views/asset/detail[id].vue b/src/views/asset/detail[id].vue
index 1728ec4..d474e71 100644
--- a/src/views/asset/detail[id].vue
+++ b/src/views/asset/detail[id].vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-asset-detail common-mobile-view">
     <el-form ref="formRef" :model="assetStore.currentAssetRecord"
-             :rules="rules" label-width="auto">
+             :rules="rules" label-position="top" label-width="auto"
+             class="form-item">
       <el-form-item label="类别" prop="category">
         <el-radio-group v-model="assetStore.currentAssetRecord.category"
                         @change="changeCategoryEvent">
diff --git a/src/views/bill/detail[id].vue b/src/views/bill/detail[id].vue
index 3300511..830491a 100644
--- a/src/views/bill/detail[id].vue
+++ b/src/views/bill/detail[id].vue
@@ -1,7 +1,8 @@
 <template>
   <div class="bill-detail-mobile common-mobile-view">
     <el-form ref="formRef" :model="billStore.currentBillRecord"
-             :rules="rules" label-width="80px">
+             :rules="rules" label-position="top" label-width="80px"
+             class="form-item">
       <el-form-item label="账本类型" prop="bookName">
         <el-radio-group v-model="billStore.currentBillRecord.bookName"
                         @change="changeBillBookNameEvent">
diff --git a/src/views/food/recipeForm.vue b/src/views/food/recipeForm.vue
index f7bb943..b7f5741 100644
--- a/src/views/food/recipeForm.vue
+++ b/src/views/food/recipeForm.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="mobile-food-recipe-form common-mobile-view">
     <el-form ref="formRef" :model="foodStore.currentFoodRecipe"
-             :rules=rules label-width="80px">
+             :rules=rules label-position="top" label-width="80px"
+             class="form-item">
       <el-steps :active="activeStep" align-center
                 style="margin-bottom: 10px;" >
         <el-step title="基础信息" />
-        <el-step title="Step 2" />
-        <el-step title="Step 3" />
+        <el-step title="食材信息" />
+        <el-step title="步骤信息" />
       </el-steps>
 
       <div v-if="activeStep === 0">
@@ -104,6 +105,7 @@ const confirmClick = () => {
   formRef.value.validate().then(() => {
     foodStore.handleFoodRecipeApi(foodStore.currentFoodRecipe)
     history.back()
+    appStore.isShowMobileBack = false
   })
 }
 
diff --git a/src/views/food/recordForm.vue b/src/views/food/recordForm.vue
index e40ffcb..f73a7d5 100644
--- a/src/views/food/recordForm.vue
+++ b/src/views/food/recordForm.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-food-record-form common-mobile-view">
     <el-form ref="formRef" :model="foodStore.currentFoodRecord"
-             :rules="rules" label-width="80">
+             :rules="rules" label-position="top" label-width="80"
+             class="form-item">
       <el-form-item label="菜谱名称" prop="name">
         <el-select
             v-model="foodStore.currentFoodRecord.name"
diff --git a/src/views/food/timeline.vue b/src/views/food/timeline.vue
new file mode 100644
index 0000000..5bd2e99
--- /dev/null
+++ b/src/views/food/timeline.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="mobile-food-timeline common-mobile-view ">
+    <div class="button-container">
+      <el-button :icon="CaretLeft" circle
+                 type="primary" size="small"
+                 @click="previousYearClick"/>
+
+      <el-date-picker
+          v-model="foodStore.queryRecord.year"
+          type="year" placeholder="请选择年份"
+          :editable="false"
+          style="width: 100px;"
+          @change="changeDateEvent"
+      />
+
+      <el-button :icon="CaretRight" circle
+                 type="primary" size="small"
+                 @click="nextYearClick"/>
+    </div>
+
+    <el-timeline v-if="foodStore.foodRecordList.length > 0">
+      <el-timeline-item v-for="(item, index) in foodStore.foodRecordList"
+                        :key="index" :timestamp="formatDate(item.date)"
+                        placement="top">
+        <div class="timeline-info card-item">
+          <span>{{ item.name }}</span>
+          <el-image :src="AListUrl + item.imageUrl"
+                    fit="contain" alt="暂无成果">
+            <template #error>
+              <div class="image-slot">
+                <span>暂无图片</span>
+              </div>
+            </template>
+          </el-image>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+
+    <el-empty v-else description="暂无记录"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
+import { useFoodStore } from '@/store/food.ts'
+import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
+import { AListUrl } from '@/utils'
+import { onMounted } from 'vue'
+
+const foodStore = useFoodStore()
+
+onMounted(async () => {
+  foodStore.queryDateType = 'year'
+  await foodStore.queryFoodRecordList()
+})
+
+const changeDateEvent = async (value: Date) => {
+  foodStore.queryRecord.year = String(value.getFullYear())
+  await foodStore.queryFoodRecordList()
+}
+
+const previousYearClick = async () => {
+  const lastYear = getLastDate(foodStore.queryRecord.year, 1, 'years')
+  foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
+  await foodStore.queryFoodRecordList()
+}
+
+const nextYearClick = async () => {
+  const lastYear = getNextDate(foodStore.queryRecord.year, 1, 'years')
+  foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
+  await foodStore.queryFoodRecordList()
+}
+</script>
+
+<style lang="scss">
+.mobile-food-timeline {
+  display: flex;
+  flex-direction: column;
+
+  .button-container {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .el-timeline {
+    padding: 10px;
+
+    .el-timeline-item__timestamp {
+      font-weight: bold;
+      color: #000000;
+    }
+
+    .timeline-info {
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .el-image {
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/journal/detail[id].vue b/src/views/journal/detail[id].vue
index cfb5a74..ebe936d 100644
--- a/src/views/journal/detail[id].vue
+++ b/src/views/journal/detail[id].vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-journal-detail common-mobile-view">
     <el-form ref="formRef" :model="journalStore.currentJournal"
-             :rules="rules" label-width="60px">
+             :rules="rules" label-position="top" label-width="60px"
+             class="form-item">
       <el-form-item label="日期" prop="date">
         <el-date-picker
             v-model="journalStore.currentJournal.date"
diff --git a/src/views/ledger/detail[id].vue b/src/views/ledger/detail[id].vue
index 88ba010..06868f1 100644
--- a/src/views/ledger/detail[id].vue
+++ b/src/views/ledger/detail[id].vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-ledger-detail common-mobile-view">
     <el-form ref="formRef" :model="ledgerStore.currentLedgerRecord"
-             :rules="rules" label-width="auto">
+             :rules="rules" label-position="top" label-width="auto"
+             class="form-item">
       <el-form-item label="账本" prop="book">
         <el-input v-model="ledgerStore.currentLedgerRecord.book"
                   placeholder="请输入账本名称" clearable
diff --git a/src/views/meta.ts b/src/views/meta.ts
index bea2163..500d2f3 100644
--- a/src/views/meta.ts
+++ b/src/views/meta.ts
@@ -37,6 +37,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '菜谱',
     icon: ''
   },
+  '/food/timeline': {
+    title: '时间轴',
+    icon: ''
+  },
   '/food/record': {
     title: '记录',
     icon: ''
diff --git a/src/views/product/detail[id].vue b/src/views/product/detail[id].vue
index 9c4bb24..bd2404f 100644
--- a/src/views/product/detail[id].vue
+++ b/src/views/product/detail[id].vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-product-detail common-mobile-view">
     <el-form ref="formRef" :model="productStore.currentProduct"
-             :rules="rules" label-width="80px">
+             :rules="rules" label-position="top" label-width="80px"
+             class="form-item">
       <el-form-item label="物品名称" prop="name">
         <el-input v-model="productStore.currentProduct.name" autocomplete="off"
                   placeholder="请输入物品名称" clearable
diff --git a/src/views/travel/recordForm.vue b/src/views/travel/recordForm.vue
index 60075f9..35a64ef 100644
--- a/src/views/travel/recordForm.vue
+++ b/src/views/travel/recordForm.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-travel-record-form common-mobile-view">
     <el-form ref="formRef" :model="travelStore.currentTravelRecord"
-             :rules="rules" label-width="80">
+             :rules="rules" label-position="top" label-width="auto"
+             class="form-item">
       <el-form-item label="景点名称" prop="name">
         <el-select
             v-model="travelStore.currentTravelRecord.name"
diff --git a/src/views/travel/spotForm.vue b/src/views/travel/spotForm.vue
index bcf27b5..73affd1 100644
--- a/src/views/travel/spotForm.vue
+++ b/src/views/travel/spotForm.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-travel-spot-form common-mobile-view">
     <el-form ref="formRef" :model="travelStore.currentTravelSpot"
-             :rules=rules label-width="100px">
+             :rules=rules label-position="top" label-width="auto"
+             class="form-item">
       <el-form-item label="景点名称" prop="name">
         <el-input
             v-model="travelStore.currentTravelSpot.name"