feat:更新UI

src/components/Food/FoodDaily.vue

@@ -21,9 +21,6 @@ const foodStore = useFoodStore()
 const appStore = useAppStore()
 
 onMounted(async () => {
-  foodStore.queryDateType = 'month'
-  await foodStore.refreshInfo()
-
   const { month } = foodStore.queryRecord
   calendarRef.value.move(new Date(month))
 })

src/components/Food/FoodTimeline.vue

@@ -1,16 +1,27 @@
 <template>
   <div class="food-timeline">
-    <el-date-picker
-        v-model="currentYear"
-        type="year" placeholder="请选择年份"
-        :editable="false"
-        style="width: 100px;"
-        @change="changeDateEvent"
-    />
+    <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.recordList.length > 0">
       <el-timeline-item v-for="(item, index) in foodStore.recordList"
-                        :key="index" :timestamp="formatDate(item.date)" placement="top">
+                        :key="index" :timestamp="formatDate(item.date)"
+                        placement="top" color='var(--el-color-primary)'>
         <div class="timeline-info card-item">
           <span>{{ item.name }}</span>
           <el-image :src="serviceFileRootPath + item.imageUrl"
@@ -30,23 +41,32 @@
 </template>
 
 <script setup lang="ts">
+import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
 import { useFoodStore } from '@/store/food.ts'
 import { onMounted, ref } from 'vue'
-import { formatDate } from 'vue3-common/utils/dateUtil'
+import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
 import { serviceFileRootPath } from '@/utils'
 
 const currentYear = ref(new Date())
 const foodStore = useFoodStore()
 
-onMounted(async () => {
-  foodStore.queryDateType = 'year'
-  await foodStore.refreshInfo()
-})
 
 const changeDateEvent = async (value: Date) => {
   foodStore.queryRecord.year = String(value.getFullYear())
   await foodStore.refreshInfo()
 }
+
+const previousYearClick = async () => {
+  const lastYear = getLastDate(foodStore.queryRecord.year, 1, 'years')
+  foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
+  await foodStore.refreshInfo()
+}
+
+const nextYearClick = async () => {
+  const lastYear = getNextDate(foodStore.queryRecord.year, 1, 'years')
+  foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
+  await foodStore.refreshInfo()
+}
 </script>
 
 <style lang="scss">
@@ -54,13 +74,21 @@ const changeDateEvent = async (value: Date) => {
   display: flex;
   flex-direction: column;
 
-  .el-date-editor {
+  .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;

src/views/record/index.vue

@@ -1,32 +1,28 @@
 <template>
   <div class="common-mobile-view food-record">
-    <div class="food-segment card-item">
+    <div class="food-query">
       <el-input
           v-model="foodInfo.query"
-          placeholder="请输入菜谱名称" :prefix-icon="Search" clearable
+          placeholder="搜索菜友食谱" :prefix-icon="Search" clearable
           :maxlength="20" show-word-limit
       />
-
-      <div class="query-item">
-        <span>查看类型：</span>
-        <el-segmented v-model="foodStore.recordSegment"
-                      :options="recordSegmentList"/>
-      </div>
     </div>
 
     <hr style="width: 100%;"/>
 
-    <div v-if="foodStore.recordSegment === 'recipe'" class="food-calendar">
-      <food-recipe />
-    </div>
-
-    <div v-if="foodStore.recordSegment === 'daily'" class="food-calendar">
-      <food-daily />
-    </div>
-
-    <div v-if="foodStore.recordSegment === 'timeline'" class="food-calendar">
-      <food-timeline />
-    </div>
+    <el-tabs v-model="foodStore.recordSegment"
+             stretch class="record-tabs"
+             @tab-click="handleClick">
+      <el-tab-pane label="菜谱" name="recipe">
+        <food-recipe />
+      </el-tab-pane>
+      <el-tab-pane label="日历" name="daily">
+        <food-daily />
+      </el-tab-pane>
+      <el-tab-pane label="时间轴" name="timeline">
+        <food-timeline />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
@@ -37,6 +33,7 @@ import FoodTimeline from '@/components/Food/FoodTimeline.vue'
 import { Search } from '@element-plus/icons-vue'
 import { reactive } from 'vue'
 import { useFoodStore } from '@/store/food'
+import { TabsPaneContext } from 'element-plus'
 
 const foodStore = useFoodStore()
 
@@ -56,6 +53,23 @@ const recordSegmentList = [{
   label: '时间轴',
   value: 'timeline'
 }]
+
+const handleClick = async (tab: TabsPaneContext, event: Event) => {
+  switch (tab.paneName) {
+    case 'recipe':
+      break
+    case 'daily':
+      foodStore.queryDateType = 'month'
+      await foodStore.refreshInfo()
+      break
+    case 'timeline':
+      foodStore.queryDateType = 'year'
+      await foodStore.refreshInfo()
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -64,11 +78,11 @@ const recordSegmentList = [{
   flex-direction: column;
   gap: 5px;
 
-  .food-segment {
-    padding: 5px 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  .food-query {
+  }
+
+  .record-tabs {
+
   }
 }
 </style>