feat:搭建基本框架

src/views/record/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="common-mobile-view food-record">
+    <div class="food-query card-item">
+      <el-input
+          v-model="foodInfo.query"
+          placeholder="请输入菜谱名称" :prefix-icon="Search" clearable
+          :maxlength="20" show-word-limit
+      />
+
+      <div class="query-item">
+        <span>查看类型：</span>
+        <el-segmented v-model="foodInfo.recordSegment"
+                      :options="recordSegmentList"
+                      @change="changeRecordSegmentEvent()"/>
+      </div>
+    </div>
+
+    <hr style="width: 100%;"/>
+
+    <div v-if="foodInfo.recordSegment === 'recipe'" class="food-calendar">
+      <food-recipe />
+    </div>
+
+    <div v-if="foodInfo.recordSegment === 'daily'" class="food-calendar">
+      <food-daily />
+    </div>
+
+    <div v-if="foodInfo.recordSegment === 'timeline'" class="food-calendar">
+      <food-timeline />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FoodRecipe from '@/components/Food/FoodRecipe.vue'
+import FoodDaily from '@/components/Food/FoodDaily.vue'
+import FoodTimeline from '@/components/Food/FoodTimeline.vue'
+import { Search } from '@element-plus/icons-vue'
+import { onMounted, reactive } from 'vue'
+import { useFoodStore } from '@/store/food'
+import { IFoodSegment } from '@/types/food'
+
+const foodStore = useFoodStore()
+
+const foodInfo = reactive({
+  recordSegment: 'recipe' as IFoodSegment,
+  query: ''
+})
+
+const recordSegmentList = [{
+  label: '菜谱',
+  value: 'recipe'
+},
+{
+  label: '日历',
+  value: 'daily'
+},
+{
+  label: '时间轴',
+  value: 'timeline'
+}]
+
+onMounted(() => {
+  foodStore.refreshInfo()
+})
+
+const changeRecordSegmentEvent = () => {
+  foodStore.refreshInfo()
+}
+</script>
+
+<style scoped lang="scss">
+.food-record {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .food-query {
+    padding: 5px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>