From cd00fadea33503749ea4244a166df87231022af9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E5=BC=BA?= <357099073@qq.com>
Date: Fri, 26 Dec 2025 17:03:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |   2 +
 frontend/public/default.png                   | Bin 0 -> 10042 bytes
 frontend/src/api/search.ts                    |  16 +
 frontend/src/assets/less/global.less          |   3 +
 frontend/src/router/index.ts                  |   5 +
 .../src/views/components/ResourceList.vue     |  15 +-
 .../src/views/components/detail_article.vue   |  14 +-
 .../src/views/components/detail_resource.vue  |  34 +-
 frontend/src/views/components/footer.vue      |  61 +++-
 frontend/src/views/components/header.vue      | 203 ++++++++---
 frontend/src/views/components/search.vue      | 332 ++++++++++++++++++
 11 files changed, 624 insertions(+), 61 deletions(-)
 create mode 100644 frontend/public/default.png
 create mode 100644 frontend/src/api/search.ts
 create mode 100644 frontend/src/views/components/search.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index f3d4178..7409d23 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -22,7 +22,9 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/frontend/public/default.png b/frontend/public/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4e4af02c6a2f4e0a9277b5e4aa06672530c3b21
GIT binary patch
literal 10042
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

literal 0
HcmV?d00001

diff --git a/frontend/src/api/search.ts b/frontend/src/api/search.ts
new file mode 100644
index 0000000..00408b6
--- /dev/null
+++ b/frontend/src/api/search.ts
@@ -0,0 +1,16 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class search {
+  /**
+   * @description 首页搜索数据
+   * @param {string} keyword - 关键字
+   * @param {string} type - 类型
+   * @param {number} page - 页码
+   * @param {number} limit - 每页条数
+   * @return {Promise} 返回请求结果
+   */
+  static async getArticleDetail(keyword: string, type: string, page: number = 1, limit: number = 10) {
+    return request("/index/search/apiSearch", { keyword, type, page, limit }, "get");
+  }
+}
diff --git a/frontend/src/assets/less/global.less b/frontend/src/assets/less/global.less
index 7e59938..fd37282 100644
--- a/frontend/src/assets/less/global.less
+++ b/frontend/src/assets/less/global.less
@@ -5,6 +5,8 @@
 :root {
   --white:#fff;
   --primary-color: #409eff;
+  --primary-hover-color: #3c4ccf;
+  --primary-light-bg: #e7f3ff;
   --success-color: #67c23a;
   --warning-color: #e6a23c;
   --danger-color: #f56c6c;
@@ -21,6 +23,7 @@
 
   --background-color: #f5f5f5;
   --background-color-page: #f0f2f5;
+  --background-color-hover: #f7f8fd;
 }
 
 // 全局重置样式
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 6c8bd06..b7b4e19 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -47,6 +47,11 @@ const router = createRouter({
       name: "downloadGames",
       component: () => import("@/views/downloadGames/index.vue"),
     },
+    {
+      path: "/search",
+      name: "search",
+      component: () => import("@/views/components/search.vue"),
+    },
   ],
 });
 
diff --git a/frontend/src/views/components/ResourceList.vue b/frontend/src/views/components/ResourceList.vue
index 2250620..872e957 100644
--- a/frontend/src/views/components/ResourceList.vue
+++ b/frontend/src/views/components/ResourceList.vue
@@ -81,7 +81,11 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
+import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
+import defaultImage from "@/assets/imgs/default.png";
+
+const route = useRoute();
 
 // Props定义
 interface ResourceConfig {
@@ -115,7 +119,7 @@ const currentCategoryName = computed(() => {
 
 // 获取图片地址
 const getImageUrl = (imagePath: string) => {
-  if (!imagePath) return "/src/assets/imgs/default.png";
+  if (!imagePath) return defaultImage;
   return import.meta.env.VITE_API_DOMAIN + imagePath;
 };
 
@@ -130,9 +134,14 @@ const fetchCategories = async () => {
       Array.isArray(response.data.data)
     ) {
       categories.value = response.data.data;
-      // 默认选择第一个分类
+      // 检查路由参数中的category ID，如果存在则选择对应分类，否则选择第一个分类
       if (categories.value.length > 0) {
-        selectedCategory.value = categories.value[0].id;
+        const categoryIdFromRoute = route.query.category as string;
+        if (categoryIdFromRoute && categories.value.some(cat => cat.id === categoryIdFromRoute)) {
+          selectedCategory.value = categoryIdFromRoute;
+        } else {
+          selectedCategory.value = categories.value[0].id;
+        }
         fetchResources();
       }
     } else {
diff --git a/frontend/src/views/components/detail_article.vue b/frontend/src/views/components/detail_article.vue
index 4c1ba99..ceef42e 100644
--- a/frontend/src/views/components/detail_article.vue
+++ b/frontend/src/views/components/detail_article.vue
@@ -5,6 +5,7 @@ import { ElMessage } from "element-plus";
 import Header from "@/views/components/header.vue";
 import Footer from "@/views/components/footer.vue";
 import { article } from "@/api/article";
+import defaultImage from "@/assets/imgs/default.png";
 
 const route = useRoute();
 const router = useRouter();
@@ -14,7 +15,9 @@ const loading = ref(true);
 
 // 获取图片地址
 const getImageUrl = (imagePath: string) => {
-  if (!imagePath) return "/src/assets/imgs/default.png";
+  if (!imagePath) {
+    return defaultImage;
+  }
   return import.meta.env.VITE_API_DOMAIN + imagePath;
 };
 
@@ -56,6 +59,10 @@ const fetchArticleDetail = async () => {
 };
 
 onMounted(() => {
+  // 确保defaultImage被使用，防止tree-shaking
+  if (defaultImage) {
+    console.log('Default image loaded:', defaultImage);
+  }
   fetchArticleDetail();
 });
 </script>
@@ -537,6 +544,11 @@ onMounted(() => {
     justify-content: space-between;
     margin: 30px 0;
 
+    .prev,
+    .next {
+      width: 50%;
+    }
+
     a {
       color: #333;
     }
diff --git a/frontend/src/views/components/detail_resource.vue b/frontend/src/views/components/detail_resource.vue
index b49200c..5848dbc 100644
--- a/frontend/src/views/components/detail_resource.vue
+++ b/frontend/src/views/components/detail_resource.vue
@@ -5,6 +5,7 @@ import { ElMessage } from "element-plus";
 import Header from "@/views/components/header.vue";
 import Footer from "@/views/components/footer.vue";
 import { resource as resourceApi } from "@/api/resource";
+import defaultImage from "@/assets/imgs/default.png";
 
 const route = useRoute();
 const router = useRouter(); // 新增：引入useRouter
@@ -27,7 +28,9 @@ const pageInfo = computed(() => ({
 
 // 获取图片地址
 const getImageUrl = (imagePath: string) => {
-  if (!imagePath) return "/src/assets/imgs/default.png";
+  if (!imagePath) {
+    return defaultImage;
+  }
   return import.meta.env.VITE_API_DOMAIN + imagePath;
 };
 
@@ -158,14 +161,12 @@ const fetchResourceDetail = async () => {
 
   try {
     const response: any = await resourceApi.getResourceDetail(resourceId.value);
-
-    console.log("获取资源详情响应:", response);
-    if (response?.data?.code === 0 && response?.data?.data) {
-      resourceData.value = response.data.data.resource;
+    if (response.data.code === 0) {
+      resourceData.value = response.data.data;
+      console.log(resourceData.value);
       prevResource.value = response.data.data.prev_resource;
       nextResource.value = response.data.data.next_resource;
       relatedResources.value = response.data.data.related_resources || [];
-      console.log("资源数据加载完成:", resourceData.value?.title);
     } else {
       console.error("API响应格式错误:", response);
       ElMessage.error("获取资源详情失败：数据格式错误");
@@ -196,8 +197,6 @@ watch(
 );
 
 onMounted(() => {
-  // 移除原有的fetchResourceDetail调用，由watch接管
-  // 页面加载时滚动到顶部
   window.scrollTo(0, 0);
 });
 </script>
@@ -217,9 +216,7 @@ onMounted(() => {
                 <el-breadcrumb-item :to="{ path: '/' }"
                   >首页</el-breadcrumb-item
                 >
-                <el-breadcrumb-item :to="{ path: pageInfo.path }">{{
-                  pageInfo.name
-                }}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{ resourceData.cate }}</el-breadcrumb-item>
                 <el-breadcrumb-item>详情</el-breadcrumb-item>
               </el-breadcrumb>
             </div>
@@ -332,6 +329,11 @@ onMounted(() => {
               @click="handleContentClick"
             ></div>
 
+            <div class="py-5" style="color: #ccc; text-align: center">
+              -------- THE END --------
+            </div>
+
+            <el-divider></el-divider>
             <div class="disclaimers">
               <div class="disclaimer-item">
                 <div class="disclaimer-title">免责声明:</div>
@@ -519,7 +521,7 @@ onMounted(() => {
       .top-content {
         width: 100%;
         height: 400px;
-        background-color: #0081ff;
+        background-color: var(--primary-color);
         position: relative;
 
         .top-content-main {
@@ -611,10 +613,10 @@ onMounted(() => {
                     }
 
                     .value {
-                      border: 1px #0d6efd dashed;
+                      border: 1px var(--primary-color) dashed;
                       padding: 3px 6px;
                       font-size: 13px;
-                      background-color: #0081ff12;
+                      background-color: var(--primary-light-bg);
                       border-radius: 5px;
                     }
                   }
@@ -626,11 +628,11 @@ onMounted(() => {
                 align-items: center;
 
                 .codebtn {
-                  color: #0d6efd;
+                  color: var(--primary-color);
                   margin-left: 20px;
                   padding: 6px 20px;
                   border-radius: 8px;
-                  border: 1px solid #0d6efd;
+                  border: 1px solid var(--primary-color);
                   cursor: pointer;
                   transition: all 0.3s ease;
                   background-color: #fff;
diff --git a/frontend/src/views/components/footer.vue b/frontend/src/views/components/footer.vue
index 2f70c48..c5b2df3 100644
--- a/frontend/src/views/components/footer.vue
+++ b/frontend/src/views/components/footer.vue
@@ -1,4 +1,13 @@
 <script setup lang="ts">
+import { ArrowUp } from "@element-plus/icons-vue";
+
+// 返回顶部功能
+function goToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
 </script>
 <template>
   <div class="footer">
@@ -9,7 +18,7 @@
           <div class="mr-20">
             <img src="@/assets/imgs/logo-light.png" alt="Logo" height="70" />
             <p class="text-white-50 my-4 f18" style="width: 400px">
-              美天智能科技，这里是介绍！
+              这里是介绍！
             </p>
           </div>
 
@@ -85,6 +94,13 @@
     </div>
     <div class="tongji"></div>
   </section>
+
+  <!-- 回到顶部按钮 -->
+  <div class="go-to-top" @click="goToTop">
+    <el-icon class="go-to-top-icon">
+      <ArrowUp />
+    </el-icon>
+  </div>
 </template>
 <style lang="less" scoped>
 .footer {
@@ -279,4 +295,47 @@
     }
   }
 }
+
+// 回到顶部按钮样式
+.go-to-top {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  background: var(--primary-color, #409eff);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  z-index: 1000;
+
+  &:hover {
+    background: var(--primary-hover-color, #337ecc);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  .go-to-top-icon {
+    font-size: 24px;
+    color: #fff;
+  }
+}
+
+// 响应式设计 - 小屏幕调整位置
+@media (max-width: 768px) {
+  .go-to-top {
+    bottom: 20px;
+    right: 20px;
+    width: 45px;
+    height: 45px;
+
+    .go-to-top-icon {
+      font-size: 20px;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/views/components/header.vue b/frontend/src/views/components/header.vue
index 6307c2d..2ef9a96 100644
--- a/frontend/src/views/components/header.vue
+++ b/frontend/src/views/components/header.vue
@@ -1,12 +1,22 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, nextTick } from "vue";
+import { useRouter } from "vue-router";
 import { Search, User, Setting, SwitchButton } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElDialog } from "element-plus";
 
 // 响应式数据
-const showSearch = ref(false);
+const showSearchDialog = ref(false);
 const searchText = ref("");
+const searchType = ref("articles");
+const searchInput = ref();
 const username = ref("管理员"); // 这里可以从 store 获取
+const router = useRouter();
+
+// 搜索类型选项
+const searchTypeOptions = [
+  { value: "articles", label: "文章" },
+  { value: "resources", label: "资源" },
+];
 
 // 静态菜单配置
 interface MenuItem {
@@ -26,14 +36,34 @@ const staticMenuItems: MenuItem[] = [
 // 方法
 const handleSearch = () => {
   if (searchText.value.trim()) {
-    console.log("搜索:", searchText.value);
-    // TODO: 实现搜索逻辑
-    // 搜索完成后可以隐藏搜索框
-    showSearch.value = false;
+    // 跳转到搜索页面，并传递搜索关键词和类型
+    router.push({
+      path: "/search",
+      query: {
+        keyword: searchText.value.trim(),
+        type: searchType.value,
+      },
+      replace: true, // 替换当前历史记录，避免页面刷新
+    });
+    // 关闭搜索弹窗
+    showSearchDialog.value = false;
     searchText.value = "";
+    searchType.value = "articles"; // 重置为默认值
   }
 };
 
+const openSearchDialog = async () => {
+  showSearchDialog.value = true;
+  await nextTick();
+  searchInput.value?.focus();
+};
+
+const closeSearchDialog = () => {
+  showSearchDialog.value = false;
+  searchText.value = "";
+  searchType.value = "articles";
+};
+
 const handleCommand = (command: string) => {
   switch (command) {
     case "profile":
@@ -85,24 +115,10 @@ const handleCommand = (command: string) => {
       <!-- 右侧工具栏 -->
       <div class="header-right">
         <!-- 搜索按钮 -->
-        <el-button link class="search-btn" @click="showSearch = !showSearch">
+        <el-button link class="search-btn" @click="openSearchDialog">
           <el-icon><Search /></el-icon>
         </el-button>
 
-        <!-- 搜索框（可展开） -->
-        <el-input
-          v-if="showSearch"
-          v-model="searchText"
-          placeholder="搜索..."
-          size="small"
-          class="search-input"
-          @keyup.enter="handleSearch"
-        >
-          <template #prefix>
-            <el-icon><Search /></el-icon>
-          </template>
-        </el-input>
-
         <!-- 用户信息 -->
         <div class="user-info">
           <span class="username">{{ username }}</span>
@@ -130,6 +146,57 @@ const handleCommand = (command: string) => {
         </div>
       </div>
     </div>
+
+    <!-- 搜索弹窗 -->
+    <el-dialog
+      v-model="showSearchDialog"
+      title="搜索"
+      width="600px"
+      :before-close="closeSearchDialog"
+      center
+    >
+      <div class="search-dialog-content">
+        <div class="search-form-row">
+          <div class="search-form-item">
+            <el-select
+              v-model="searchType"
+              placeholder="选择类型"
+              size="large"
+              class="search-type-select"
+            >
+              <el-option
+                v-for="option in searchTypeOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </div>
+
+          <div class="search-form-item">
+            <el-input
+              v-model="searchText"
+              placeholder="请输入搜索关键词..."
+              size="large"
+              clearable
+              @keyup.enter="handleSearch"
+              ref="searchInput"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeSearchDialog">取消</el-button>
+          <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -181,13 +248,13 @@ const handleCommand = (command: string) => {
               transition: all 0.3s ease;
 
               &:hover {
-                color: #409eff;
-                background: rgba(64, 158, 255, 0.1);
+                color: var(--primary-color);
+                background: var(--primary-light-bg);
               }
 
               &.router-link-active {
-                color: #409eff;
-                background: rgba(64, 158, 255, 0.1);
+                color: var(--primary-color);
+                background: var(--primary-light-bg);
               }
             }
           }
@@ -198,30 +265,28 @@ const handleCommand = (command: string) => {
     .header-right {
       display: flex;
       align-items: center;
-      gap: 16px;
+      gap: 12px;
 
       .search-btn {
         color: #666;
+        flex-shrink: 0;
 
         &:hover {
-          color: #409eff;
+          color: var(--primary-color);
         }
       }
 
-      .search-input {
-        width: 200px;
-        margin-right: 16px;
-      }
-
       .user-info {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 6px;
+        flex-shrink: 0;
 
         .username {
           color: #333;
           font-size: 14px;
           font-weight: 500;
+          white-space: nowrap;
         }
 
         .user-dropdown {
@@ -233,7 +298,7 @@ const handleCommand = (command: string) => {
 
             &:hover {
               transform: scale(1.05);
-              box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+              box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
             }
           }
         }
@@ -266,11 +331,6 @@ const handleCommand = (command: string) => {
       .header-right {
         gap: 8px;
 
-        .search-input {
-          width: 150px;
-          margin-right: 8px;
-        }
-
         .username {
           display: none; // 小屏幕隐藏用户名
         }
@@ -288,4 +348,67 @@ const handleCommand = (command: string) => {
     }
   }
 }
+
+// 搜索弹窗样式
+.search-dialog-content {
+  padding: 20px 15px;
+
+  .search-form-row {
+    display: flex;
+    gap: 15px;
+    align-items: flex-start;
+    padding: 0 10px;
+    box-sizing: border-box;
+
+    .search-form-item {
+      &:first-child {
+        flex: 0 0 20%; // 4/10 = 40%
+      }
+
+      &:last-child {
+        flex: 0 0 80%; // 6/10 = 60%
+      }
+
+      .search-label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #303133;
+        font-size: 14px;
+      }
+
+      .search-type-select {
+        width: 100%;
+      }
+
+      .el-input {
+        .el-input__inner {
+          border-radius: 8px;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+// 搜索弹窗响应式设计
+@media (max-width: 768px) {
+  .search-dialog-content {
+    .search-form-row {
+      flex-direction: column;
+      gap: 16px;
+
+      .search-form-item {
+        &:first-child,
+        &:last-child {
+          flex: none;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/frontend/src/views/components/search.vue b/frontend/src/views/components/search.vue
new file mode 100644
index 0000000..b4ccc3e
--- /dev/null
+++ b/frontend/src/views/components/search.vue
@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import Header from "@/views/components/header.vue";
+import Footer from "@/views/components/footer.vue";
+import { ElMessage } from "element-plus";
+import { search } from "@/api/search";
+
+// 搜索关键词、结果、加载状态
+const searchText = ref("");
+const searchType = ref("articles");
+const loading = ref(false);
+const results = ref<any[]>([]);
+const router = useRouter();
+const route = useRoute();
+
+const hasSearched = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const totalPages = ref(0);
+
+// 搜索类型选项
+const searchTypeOptions = [
+  { value: "articles", label: "文章" },
+  { value: "resources", label: "资源" },
+];
+
+const handleSearch = async (page: number = 1) => {
+  if (!searchText.value.trim()) {
+    ElMessage.warning("请输入搜索关键词");
+    return;
+  }
+  results.value = [];
+  loading.value = true;
+  try {
+    const res = await search.getArticleDetail(
+      searchText.value.trim(),
+      searchType.value,
+      page,
+      pageSize.value
+    );
+    results.value = res.data.data?.items || [];
+    total.value = res.data.data?.total || 0;
+    totalPages.value = res.data.data?.total_pages || 0;
+    currentPage.value = page;
+    hasSearched.value = true;
+
+    // 确保分页数据正确
+    if (total.value > 0 && totalPages.value <= 1) {
+      totalPages.value = Math.ceil(total.value / pageSize.value);
+    }
+  } catch (error) {
+    console.error("搜索失败:", error);
+    ElMessage.error("搜索失败，请稍后重试");
+    results.value = [];
+    total.value = 0;
+    totalPages.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleResultClick = (item: any) => {
+  // 根据搜索类型跳转到对应的详情页
+  if (searchType.value === "articles") {
+    router.push({ path: "/article", query: { id: item.id } });
+  } else if (searchType.value === "resources") {
+    router.push({ path: "/resource", query: { id: item.id } });
+  }
+};
+
+// 分页处理
+const handleCurrentChange = (page: number) => {
+  handleSearch(page);
+};
+
+const handleSizeChange = (size: number) => {
+  pageSize.value = size;
+  handleSearch(1);
+};
+
+// 如果支持路由传参，可以自动填充搜索内容
+if (route.query.keyword) {
+  searchText.value = String(route.query.keyword);
+  if (route.query.type) {
+    searchType.value = String(route.query.type);
+  }
+  handleSearch();
+}
+
+// 监听路由参数变化，自动重新搜索
+watch(
+  () => route.query,
+  (newQuery) => {
+    if (newQuery.keyword) {
+      const keyword = String(newQuery.keyword);
+      const type = newQuery.type ? String(newQuery.type) : "articles";
+
+      // 只有当参数真正变化时才重新搜索
+      if (keyword !== searchText.value || type !== searchType.value) {
+        searchText.value = keyword;
+        searchType.value = type;
+        handleSearch();
+      }
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <Header />
+
+  <div class="search-page-container">
+    <div class="search-bar">
+      <el-select
+        v-model="searchType"
+        placeholder="选择类型"
+        class="search-type-select"
+        size="large"
+      >
+        <el-option
+          v-for="option in searchTypeOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+      <input
+        v-model="searchText"
+        @keyup.enter="handleSearch"
+        placeholder="请输入搜索关键词"
+        class="search-input"
+      />
+      <button @click="handleSearch" class="search-btn">搜索</button>
+    </div>
+    <el-divider></el-divider>
+    <div class="search-results-area">
+      <template v-if="loading">
+        <div class="search-loading">正在搜索，请稍候…</div>
+      </template>
+      <template v-else>
+        <template v-if="hasSearched">
+          <template v-if="results.length === 0">
+            <div class="search-no-result">没有找到相关内容</div>
+          </template>
+          <ul v-else class="search-result-list">
+            <li
+              class="search-result-item"
+              v-for="(item, idx) in results"
+              :key="item.id"
+              @click="handleResultClick(item)"
+              tabindex="0"
+            >
+              <div class="result-title">
+                <span class="tag" v-if="item.category?.name">{{
+                  item.category.name
+                }}</span>
+                <div class="title">{{ item.title }}</div>
+              </div>
+              <div class="result-meta">
+                <span class="result-author" v-if="item.author">
+                  <i class="el-icon-user"></i> {{ item.author }}
+                </span>
+                <span class="result-date" v-if="item.publishdate">
+                  <i class="el-icon-time"></i> {{ item.publishdate }}
+                </span>
+              </div>
+            </li>
+          </ul>
+        </template>
+      </template>
+
+      <!-- 分页 -->
+      <div v-if="hasSearched && total > 0" class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<style scoped>
+.search-page-container {
+  max-width: 800px;
+  margin: 120px auto 20px;
+  padding: 30px 20px 60px;
+  background: #fff;
+  min-height: 70vh;
+  border-radius: 10px;
+  box-shadow: 0 4px 24px rgba(76, 80, 130, 0.08);
+}
+
+.search-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.search-type-select {
+  width: 100px;
+  height: 38px;
+}
+
+.search-input {
+  width: 320px;
+  height: 38px;
+  font-size: 16px;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  padding: 0 15px;
+  transition: border-color 0.2s;
+  outline: none;
+}
+.search-input:focus {
+  border-color: var(--primary-color);
+}
+
+.search-btn {
+  height: 38px;
+  padding: 0 28px;
+  border-radius: 5px;
+  background: var(--primary-color);
+  color: #fff;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.search-btn:hover {
+  background: var(--primary-hover-color);
+}
+
+.search-results-area {
+  margin-top: 22px;
+  min-height: 200px;
+}
+
+.search-loading {
+  text-align: center;
+  color: #777;
+  font-size: 18px;
+}
+
+.search-no-result {
+  text-align: center;
+  color: #bbb;
+  font-size: 17px;
+  padding: 60px 0 80px;
+}
+
+.search-result-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search-result-item {
+  padding: 18px 20px 12px 20px;
+  border-bottom: 1px dashed #f0f0f0;
+  margin-bottom: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.search-result-item:focus,
+.search-result-item:hover {
+  background: var(--background-color-hover);
+}
+
+.result-title {
+  font-weight: bold;
+  font-size: 18px;
+  color: #262f46;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.result-title .tag {
+  background: var(--primary-light-bg);
+  color: var(--primary-color);
+  font-size: 13px;
+  border-radius: 3px;
+  padding: 4px 8px;
+  margin-left: 8px;
+  width: 100px;
+  text-align: center;
+}
+
+.result-title .title{
+    width: 100%;
+}
+
+.result-meta {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 14px;
+  color: #909399;
+
+  .result-author,
+  .result-date {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .el-icon-user,
+  .el-icon-time {
+    font-size: 12px;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+  padding: 20px 0;
+}
+</style>