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>