feat:搭建基本框架

src/views/app/stats/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="common-mobile-view">
-    统计
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/views/login/index.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
-    登录
+    <el-button type="primary" @click="loginClick">登录</el-button>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+
+const loginClick = () => {
+  router.push('/record')
+}
 </script>
 
 <style scoped lang="scss">

src/views/meta.ts

@@ -1,6 +1,6 @@
 import type { IRouteMetaConfig } from 'vue3-common/types'
 
-export const routerMeta: IRouteMetaConfig = {
+export const menuMeta: IRouteMetaConfig = {
   '/record': {
     path: '/record',
     redirect: '/record/index'
@@ -8,5 +8,13 @@ export const routerMeta: IRouteMetaConfig = {
   '/stats': {
     path: '/stats',
     redirect: '/stats/index'
+  },
+  '/moment': {
+    path: '/moment',
+    redirect: '/moment/index'
+  },
+  '/profile': {
+    path: '/profile',
+    redirect: '/profile/index'
   }
 }

src/views/moment/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="common-mobile-view food-moment">
+    <moment-card v-for="(item, index) in 4" :key="index"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MomentCard from '@/components/Moment/MomentCard.vue'
+</script>
+
+<style lang="scss">
+.food-moment {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

src/views/profile/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="common-mobile-view">
-    记录
+  <div class="common-mobile-view profile">
+    个人中心
   </div>
 </template>
 
 <script setup lang="ts">
-
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 
 </style>

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>

src/views/stats/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="common-mobile-view food-stats">
+    <food-stats />
+
+    <food-chart />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FoodStats from '@/components/Stats/FoodStats.vue'
+import FoodChart from '@/components/Stats/FoodChart.vue'
+</script>
+
+<style lang="scss">
+.food-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>