refactor: 优化图片处理与数据库连接配置

biji-qianduan/src/components/home/HomeHeader.vue

@@ -4,19 +4,21 @@
     <el-header class="header" v-if="!isMobile">
       <h1 @click="$emit('reset-view')" style="cursor: pointer; flex-grow: 1;">我的笔记</h1>
       <div class="actions">
-        <el-input
-            :model-value="searchKeyword"
-            @update:model-value="$emit('update:searchKeyword', $event)"
-            placeholder="搜索笔记标题"
-            class="search-input"
-            @keyup.enter="$emit('search')"
-        >
-          <template #append>
-            <el-button @click="$emit('search')">
-              <el-icon><Search /></el-icon>
-            </el-button>
-          </template>
-        </el-input>
+        <div class="search-box">
+          <el-input
+              :model-value="searchKeyword"
+              @update:model-value="handleSearchInput"
+              placeholder="搜索笔记标题"
+              class="search-input"
+              @keyup.enter="$emit('search')"
+              clearable
+              @clear="handleClear"
+          >
+            <template #suffix>
+              <el-icon class="search-icon" @click="$emit('search')"><Search /></el-icon>
+            </template>
+          </el-input>
+        </div>
         <div v-if="userStore.isLoggedIn" class="user-actions">
           <span class="welcome-text">欢迎, {{ userStore.userInfo?.username }}</span>
           <el-button type="danger" @click="$emit('logout')">退出</el-button>
@@ -58,14 +60,16 @@
     <div v-if="isMobile" class="mobile-search-container">
       <el-input
           :model-value="searchKeyword"
-          @update:model-value="$emit('update:searchKeyword', $event)"
+          @update:model-value="handleSearchInput"
           placeholder="搜索笔记标题"
           class="mobile-search-input"
           @keyup.enter="$emit('search')"
+          @clear="handleClear"
+          clearable
           size="large"
       >
         <template #prefix>
-          <el-icon><Search /></el-icon>
+          <el-icon class="mobile-search-icon"><Search /></el-icon>
         </template>
       </el-input>
     </div>
@@ -104,6 +108,21 @@ const handleUpload = (file) => {
   emit('upload-markdown', file);
   return false; // Prevent el-upload's default behavior
 };
+
+// 处理搜索输入 - 当输入为空时自动回到首页
+const handleSearchInput = (value) => {
+  emit('update:searchKeyword', value);
+  // 当清空输入时，自动触发回到首页
+  if (!value || value.trim() === '') {
+    emit('reset-view');
+  }
+};
+
+// 处理清空按钮点击
+const handleClear = () => {
+  emit('update:searchKeyword', '');
+  emit('reset-view');
+};
 </script>
 
 <style scoped>
@@ -130,8 +149,42 @@ const handleUpload = (file) => {
   align-items: center;
 }
 
+.search-box {
+  display: flex;
+  align-items: center;
+}
+
 :deep(.search-input .el-input__wrapper) {
-  border-radius: var(--border-radius) !important;
+  border-radius: 20px !important;
+  padding-right: 8px;
+  transition: all 0.3s ease;
+}
+
+:deep(.search-input .el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+:deep(.search-input .el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+.search-icon {
+  cursor: pointer;
+  color: var(--el-text-color-placeholder);
+  font-size: 16px;
+  padding: 4px;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.search-icon:hover {
+  color: var(--el-color-primary);
+  background-color: var(--el-color-primary-light-9);
+}
+
+.mobile-search-icon {
+  color: var(--el-text-color-placeholder);
+  font-size: 18px;
 }
 
 .user-actions, .guest-actions {