feat:更新个人中心UI

src/components/Food/FoodQuery.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="search-container">
+    <el-input v-if="expanded" ref="inputRef"
+              v-model="searchText" placeholder="搜索菜友食谱"
+              style="width: 200px;"
+              show-word-limit :maxlength="10" clearable
+              @keyup.enter="handleSearch" @blur="handleBlur"
+    />
+
+    <el-button v-else :icon="Search"
+               circle size="small" @click="expandSearch"/>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+
+const expanded = ref(false)
+const searchText = ref('')
+const inputRef = ref(null)
+
+// 展开搜索框
+const expandSearch = () => {
+  expanded.value = true
+  // 等待DOM更新后自动聚焦输入框
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+// 处理搜索
+const handleSearch = () => {
+  if (searchText.value.trim()) {
+    console.log('搜索内容:', searchText.value)
+    // 这里可以触发搜索逻辑
+  }
+}
+
+// 输入框失去焦点时的处理
+const handleBlur = () => {
+  if (!searchText.value.trim()) {
+    expanded.value = false
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/components/Food/FoodRecipe.vue

@@ -24,7 +24,7 @@
 import FoodCard from '@/components/Food/FoodCard.vue'
 import ArriveBottom from '@/components/ArriveButton.vue'
 import { useFoodStore } from '@/store/food.ts'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { ICategory } from '@/types'
 
 const foodRecipeRef = ref()
@@ -33,10 +33,7 @@ const foodStore = useFoodStore()
 const queryCategoryList = ref([] as ICategory[])
 
 onMounted(async () => {
-  await foodStore.queryCategory()
-  initCategoryList()
   // foodStore.foodRecipeList = []
-  await foodStore.refreshInfo()
   // foodRecipeRef.value.addEventListener('scroll', handleScroll)
 })
 
@@ -44,6 +41,10 @@ onBeforeUnmount(() => {
   // foodRecipeRef.value.removeEventListener('scroll', handleScroll)
 })
 
+watch(() => foodStore.isRefresh, () => {
+  initCategoryList()
+})
+
 const initCategoryList = () => {
   queryCategoryList.value = []
   queryCategoryList.value.push({

src/components/Food/FoodTimeline.vue

@@ -43,29 +43,26 @@
 <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, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
 import { serviceFileRootPath } from '@/utils'
 
-const currentYear = ref(new Date())
 const foodStore = useFoodStore()
 
-
 const changeDateEvent = async (value: Date) => {
   foodStore.queryRecord.year = String(value.getFullYear())
-  await foodStore.refreshInfo()
+  await foodStore.queryRecordList()
 }
 
 const previousYearClick = async () => {
   const lastYear = getLastDate(foodStore.queryRecord.year, 1, 'years')
   foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
-  await foodStore.refreshInfo()
+  await foodStore.queryRecordList()
 }
 
 const nextYearClick = async () => {
   const lastYear = getNextDate(foodStore.queryRecord.year, 1, 'years')
   foodStore.queryRecord.year = String(new Date(lastYear).getFullYear())
-  await foodStore.refreshInfo()
+  await foodStore.queryRecordList()
 }
 </script>
 

src/components/Moment/MomentCard.vue

@@ -150,61 +150,3 @@ const viewProfileClick = async () => {
   }
 }
 </script>
-
-<style lang="scss">
-.moment-card {
-  padding: 10px;
-
-  display: grid;
-  grid-template-columns: 50px 1fr;
-  gap: 10px;
-
-  .moment-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    p {
-      margin: 0;
-    }
-
-    .username {
-      font-weight: bold;
-      font-size: larger;
-    }
-
-    .moment-image-list {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 10px;
-    }
-
-    .button-container {
-      display: flex;
-      gap: 20px;
-    }
-
-    .moment-comment {
-      display: grid;
-      grid-template-columns: 1fr 40px 60px;
-      justify-items: center;
-      gap: 5px;
-    }
-
-    .moment-comment-list {
-      padding: 10px;
-      background-color: var(--color-comment-bg);
-
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-
-      .moment-comment-item {
-        .name {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/Moment/MomentList.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="food-moment"
+       v-loading="foodStore.isLoading" element-loading-text="加载中">
+    <el-empty v-if="foodStore.momentList.length === 0" description="暂无朋友圈记录"/>
+
+    <div v-else class="moment-list">
+      <moment-card v-for="(item, index) in foodStore.momentList"
+                   :key="index" :item="item"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MomentCard from '@/components/Moment/MomentCard.vue'
+import { useFoodStore } from '@/store/food'
+
+const foodStore = useFoodStore()
+</script>
+
+
+<style lang="scss">
+@use "@/styles/moment.module.scss";
+</style>