把东西放入vue文件夹

.idea/.gitignore

@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/bloggingplatform.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/bloggingplatform.iml" filepath="$PROJECT_DIR$/.idea/bloggingplatform.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

vue/src/components/BlogSearch.vue

@@ -1,75 +1,73 @@
 <template>
-  <!-- 搜索区域 -->
-  <div v-if="!showResults" class="search-component">
-    <input type="text" v-model="searchTerm" placeholder="请输入搜索词" />
-    <button @click="performSearch">搜索</button>
-  </div>
-
-  <!-- 搜索结果展示区域 -->
-  <div v-if="showResults" class="search-results-page">
-    <!-- 搜索词展示 -->
-    <div class="search-term-display">
-      <h2>搜索结果：“{{ searchTerm }}”</h2>
+  <div>
+    <!-- 搜索区域 -->
+    <div v-if="!showResults" class="search-component">
+      <input type="text" v-model="searchTerm" placeholder="请输入搜索词" />
+      <button @click="performSearch">搜索</button>
     </div>
 
-    <!-- 排序与筛选区域 -->
-    <div class="sort-filter-area">
-      <!-- 排序方式选择 -->
-      <div class="sort-by">
-        <label for="sort-select">排序方式：</label>
-        <select id="sort-select" v-model="sortBy">
-          <option value="relevance">相关性</option>
-          <option value="publishDate-desc">发布日期（最新）</option>
-          <option value="publishDate-asc">发布日期（最旧）</option>
-          <option value="popularity">热度</option>
-        </select>
+    <!-- 搜索结果展示区域 -->
+    <div v-if="showResults" class="search-results-page">
+      <!-- 搜索词展示 -->
+      <div class="search-term-display">
+        <h2>搜索结果：“{{ searchTerm }}”</h2>
       </div>
 
-      <!-- 筛选条件选择 -->
-      <div class="filter-by">
-        <label for="category-select">文章类别：</label>
-        <select id="category-select" v-model="filterConditions.category">
-          <option value="">全部</option>
-          <option value="food">美食</option>
-          <option value="travel">旅游</option>
-          <option value="technology">科技</option>
-        </select>
-        <label for="time-range-select">时间范围：</label>
-        <select id="time-range-select" v-model="filterConditions.timeRange">
-          <option value="">全部</option>
-          <option value="this-week">本周</option>
-          <option value="this-month">本月</option>
-          <option value="this-year">本年内</option>
-        </select>
-      </div>
+      <!-- 排序与筛选区域 -->
+      <div class="sort-filter-area">
+        <!-- 排序方式选择 -->
+        <div class="sort-by">
+          <label for="sort-select">排序方式：</label>
+          <select id="sort-select" v-model="sortBy">
+            <option value="relevance">相关性</option>
+            <option value="publishDate-desc">发布日期（最新）</option>
+            <option value="publishDate-asc">发布日期（最旧）</option>
+            <option value="popularity">热度</option>
+          </select>
+        </div>
 
-      <!-- 应用筛选与排序按钮 -->
-      <button @click="applyFilter">应用筛选</button>
-      <button @click="sortResults">排序</button>
-    </div>
+        <!-- 筛选条件选择 -->
+        <div class="filter-by">
+          <label for="category-select">文章类别：</label>
+          <select id="category-select" v-model="filterConditions.category">
+            <option value="">全部</option>
+            <option value="food">美食</option>
+            <option value="travel">旅游</option>
+            <option value="technology">科技</option>
+          </select>
+          <label for="time-range-select">时间范围：</label>
+          <select id="time-range-select" v-model="filterConditions.timeRange">
+            <option value="">全部</option>
+            <option value="this-week">本周</option>
+            <option value="this-month">本月</option>
+            <option value="this-year">本年内</option>
+          </select>
+        </div>
 
-    <!-- 搜索结果列表展示 -->
-    <div class="result-list-area">
-      <ul>
-        <li v-for="(result, index) in searchResults" :key="index">
-          <!-- 突出显示搜索词 -->
-          <h3 v-html="result.title | highlight(searchTerm)"></h3>
-          <p v-html="result.summary | highlight(searchTerm)"></p>
-          <p>发布日期：{{ result.publishDate }}</p>
-        </li>
-      </ul>
-    </div>
+        <!-- 应用筛选与排序按钮 -->
+        <button @click="applyFilter">应用筛选</button>
+        <button @click="sortResults">排序</button>
+      </div>
 
-    <!-- 分页区域 -->
-    <div class="pagination-area">
-      <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
-      <span>第{{ currentPage }}页 / 共{{ totalPages }}页</span>
-      <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
-    </div>
+      <!-- 搜索结果列表展示 -->
+      <div class="result-list-area">
+        <ul>
+          <li v-for="(result, index) in searchResults" :key="index">
+            <!-- 突出显示搜索词 -->
+            <h3 v-html="result.title | highlight(searchTerm)"></h3>
+            <p v-html="result.summary | highlight(searchTerm)"></p>
+            <p>发布日期：{{ result.publishDate }}</p>
+          </li>
+        </ul>
+      </div>
 
-    <!-- 返回相关区域 -->
-    <div class="back-button-area">
-      <button @click="goBackToSearch">返回搜索</button>
+      <!-- 最下面一排的导航按钮 -->
+      <div class="bottom-navigation">
+        <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
+        <span>第{{ currentPage }}页 / 共{{ totalPages }}页</span>
+        <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
+        <button @click="goBackToSearch">返回搜索</button>
+      </div>
     </div>
   </div>
 </template>
@@ -259,4 +257,12 @@ button {
 .back-button-area {
   margin-top: 20px;
 }
+.bottom-navigation {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #ccc;
+  padding-top: 20px;
+}
 </style>