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>