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;