feat:更新UI

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>