From de396f57db3a5b43cbca29b40e91d3d0865ff9df Mon Sep 17 00:00:00 2001
From: wuhans-first-deep-love <2966551326@qq.com>
Date: Fri, 30 May 2025 17:12:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=90=9C=E7=B4=A2=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E7=95=8C=E9=9D=A2=EF=BC=8C=E9=A1=B6=E6=A0=8F=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=90=9C=E7=B4=A2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-unilife/src/components/HeaderBar.vue  |  60 ++-
 Front/vue-unilife/src/routers/routers.ts      |   9 +-
 Front/vue-unilife/src/views/SearchResult.vue  | 395 ++++++++++++++++++
 3 files changed, 462 insertions(+), 2 deletions(-)
 create mode 100644 Front/vue-unilife/src/views/SearchResult.vue

diff --git a/Front/vue-unilife/src/components/HeaderBar.vue b/Front/vue-unilife/src/components/HeaderBar.vue
index 3ff6a95..2266670 100644
--- a/Front/vue-unilife/src/components/HeaderBar.vue
+++ b/Front/vue-unilife/src/components/HeaderBar.vue
@@ -1,9 +1,17 @@
 <script setup>
   import { House, Cloudy, User, Cpu, Message, HomeFilled, MessageBox, Calendar } from '@element-plus/icons-vue'
-  import {useRoute} from 'vue-router'
+  import {useRoute,useRouter } from 'vue-router'
 
+  import { ref } from 'vue'
   const route = useRoute();
+  const router = useRouter();
+  const searchText = ref('')
 
+  function goSearch() {
+    if (searchText.value.trim()) {
+      router.push({ path: '/search', query: { query: searchText.value.trim() } })
+    }
+  }
 </script>
 
 <template>
@@ -31,6 +39,19 @@
               <Cpu />
             </el-icon>
         </router-link>
+        
+      </div>
+
+      <!-- 新增的搜索框 -->
+      <div class="header-search">
+        <input
+            type="text"
+            v-model="searchText"
+            @keyup.enter="goSearch"
+            placeholder="搜索..."
+            aria-label="搜索"
+        />
+        <button @click="goSearch">搜索</button>
       </div>
   
       <!-- 右侧部分 -->
@@ -115,4 +136,41 @@
     border-radius: 50%;
     object-fit: cover;
   }
+
+  .header-search {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+  }
+
+  .header-search input {
+    width: 180px;
+    padding: 6px 10px;
+    font-size: 14px;
+    border-radius: 4px 0 0 4px;
+    border: 1px solid #ccc;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .header-search input:focus {
+    border-color: #765ce6;
+  }
+
+  .header-search button {
+    padding: 6px 12px;
+    border: none;
+    background-color: #765ce6;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 0 4px 4px 0;
+    transition: background-color 0.2s;
+    user-select: none;
+  }
+
+  .header-search button:hover {
+    background-color: #5a42b8;
+  }
+
   </style>
diff --git a/Front/vue-unilife/src/routers/routers.ts b/Front/vue-unilife/src/routers/routers.ts
index 29c905d..1a764bb 100644
--- a/Front/vue-unilife/src/routers/routers.ts
+++ b/Front/vue-unilife/src/routers/routers.ts
@@ -9,6 +9,7 @@ import PostManager from '@/views/PostManagement.vue';
 import Curriculum from '@/views/Curriculum.vue';
 import DirectMessage from '@/views/DirectMessage.vue';
 import AIManager from '@/views/AiManager.vue'
+import SearchResult from "@/views/SearchResult.vue";
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -84,7 +85,13 @@ const routes: Array<RouteRecordRaw> = [
         path:'/directMessage',
         name:'DirectMessage',
         component:() => import('@/views/DirectMessage.vue'),
-    }
+    },
+    {
+        path: '/search',
+        name: 'SearchResult',
+        component: SearchResult,
+    },
+
 
 ];
 
diff --git a/Front/vue-unilife/src/views/SearchResult.vue b/Front/vue-unilife/src/views/SearchResult.vue
new file mode 100644
index 0000000..d044531
--- /dev/null
+++ b/Front/vue-unilife/src/views/SearchResult.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="search-container">
+    <!-- 左侧栏 -->
+    <aside class="sidebar">
+      <section class="search-standards">
+        <ul>
+          <li
+              v-for="standard in standards"
+              :key="standard"
+              :class="{active: selectedStandard === standard}"
+              @click="selectStandard(standard)"
+          >{{ standard }}</li>
+        </ul>
+      </section>
+
+      <hr />
+
+      <section class="categories">
+        <h3>分类</h3>
+
+        <div class="category-group">
+          <div class="category-title">作业/资料：</div>
+          <ul>
+            <li
+                v-for="college in colleges"
+                :key="college"
+                @click="selectCategory(college)"
+                :class="{active: selectedCategory === college}"
+            >
+              {{ college }}
+            </li>
+            <li>(以下省略)</li>
+          </ul>
+        </div>
+
+        <hr />
+
+        <div class="category-group">
+          <div class="category-title">帖子：</div>
+          <ul>
+            <li
+                v-for="postType in postTypes"
+                :key="postType"
+                @click="selectCategory(postType)"
+                :class="{active: selectedCategory === postType}"
+            >
+              {{ postType }}
+            </li>
+            <li>(以下省略)</li>
+          </ul>
+        </div>
+      </section>
+    </aside>
+
+    <!-- 右侧栏 -->
+    <main class="search-results">
+      <div class="search-box">
+        <input
+            type="text"
+            v-model="searchQuery"
+            placeholder="请输入搜索关键字"
+            @keypress.enter="doSearch"
+            aria-label="搜索输入"
+        />
+        <button @click="doSearch">🔍 搜索</button>
+      </div>
+
+      <div class="results-list" v-if="pagedResults.length">
+        <div v-for="item in pagedResults" :key="item.id" class="result-item">
+          <div class="content">
+            <h4>{{ item.title }}</h4>
+            <p>{{ item.content }}</p>
+          </div>
+          <div class="preview-box">
+            <!-- 这里你可用图片或其它预览，示例文本 -->
+            预览图/内容
+          </div>
+        </div>
+      </div>
+      <div v-else class="no-results">
+        暂无搜索结果
+      </div>
+
+      <div class="pagination" v-if="totalPages > 1">
+        <button @click="prevPage" :disabled="page === 1">上一页</button>
+        <span>第 {{ page }} 页 / 共 {{ totalPages }} 页</span>
+        <button @click="nextPage" :disabled="page === totalPages">下一页</button>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+// 路由参数
+const route = useRoute()
+
+// 搜索标准
+const standards = ['综合', '最新', '热度最高', '用户']
+const selectedStandard = ref('综合')
+
+// 分类选项
+const colleges = [
+  '计算机学院',
+  '遥感学院',
+  '电子信息学院',
+  // 省略更多...
+]
+const postTypes = [
+  '二手集市',
+  '吐槽树洞',
+  '校内组局',
+  // 省略更多...
+]
+
+const selectedCategory = ref<string | null>(null)
+
+// 搜索相关状态
+const searchQuery = ref('')
+const results = ref([
+  // 固定假数据示例（真实项目你要通过API替换）
+  { id: 1, title: '帖子标题1', content: '帖子内容A' },
+  { id: 2, title: '帖子标题2', content: '帖子内容B' },
+  { id: 3, title: '帖子标题3', content: '帖子内容C' },
+  { id: 4, title: '帖子标题4', content: '帖子内容D' },
+  { id: 5, title: '帖子标题5', content: '帖子内容E' },
+  { id: 6, title: '帖子标题6', content: '帖子内容F' },
+])
+
+// 分页
+const page = ref(1)
+const pageSize = 3
+
+// 初始化搜索词，如果路由query带了query参数，则自动填充并搜索
+onMounted(() => {
+  const queryParam = route.query.query
+  if (typeof queryParam === 'string' && queryParam.trim()) {
+    searchQuery.value = queryParam.trim()
+    doSearch()
+  }
+})
+
+// 计算过滤结果（这里简单模拟：按selectedCategory和searchQuery筛选）
+const filteredResults = computed(() => {
+  let filtered = results.value
+
+  // 1. 分类过滤
+  if (selectedCategory.value) {
+    filtered = filtered.filter(item => item.title.includes(selectedCategory.value!))
+  }
+  // 2. 搜索关键词过滤（标题/content）
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    filtered = filtered.filter(item =>
+        item.title.toLowerCase().includes(q) || item.content.toLowerCase().includes(q)
+    )
+  }
+  // 3. TODO: 按 selectedStandard 排序（综合，最新，热度最高，用户 等）
+  // 这里留空，可根据业务需求实现排序逻辑
+
+  return filtered
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(filteredResults.value.length / pageSize)))
+
+const pagedResults = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredResults.value.slice(start, start + pageSize)
+})
+
+// 行为方法
+
+function selectStandard(std: string) {
+  selectedStandard.value = std
+  page.value = 1
+  doSearch()
+}
+
+function selectCategory(cat: string) {
+  selectedCategory.value = cat
+  page.value = 1
+  doSearch()
+}
+
+function doSearch() {
+  page.value = 1
+  // 实际项目里会去调用接口获取数据，这里用的是本地过滤
+}
+
+function prevPage() {
+  if (page.value > 1) page.value--
+}
+
+function nextPage() {
+  if (page.value < totalPages.value) page.value++
+}
+</script>
+
+<style scoped>
+.search-container {
+  width: 1800px;
+  height: 1000px;
+  margin: 20px auto;
+  display: flex;
+  gap: 24px;
+  padding: 24px;
+  background: linear-gradient(90deg, #f6e7f7, #e2e0f9);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 24px;
+  box-sizing: border-box;
+}
+
+/* 左侧栏 */
+.sidebar {
+  flex: 0 0 280px;
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 0 12px #ddd;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar ul li {
+  margin: 10px 0;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s;
+  font-size: 1.1em;
+}
+
+.sidebar ul li:hover {
+  color: #7a42f4;
+}
+
+.sidebar ul li.active {
+  font-weight: 700;
+  color: #581ce0;
+}
+
+.categories h3 {
+  margin-bottom: 12px;
+  font-size: 1.3em;
+  font-weight: 700;
+}
+
+.category-group {
+  margin-bottom: 16px;
+}
+
+.category-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 1.1em;
+}
+
+/* 右侧栏 */
+.search-results {
+  flex: 1;
+  background: #faf8ff;
+  padding: 32px;
+  border-radius: 8px;
+  box-shadow: 0 0 12px #ccc;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow: hidden;
+}
+
+.search-box {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.search-box input {
+  flex: 1;
+  padding: 12px 16px;
+  font-size: 1.2em;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-box input:focus {
+  border-color: #765ce6;
+}
+
+.search-box button {
+  cursor: pointer;
+  padding: 10px 18px;
+  font-size: 1.1em;
+  border: none;
+  background-color: #765ce6;
+  color: white;
+  border-radius: 6px;
+  user-select: none;
+  transition: background-color 0.2s;
+}
+
+.search-box button:hover {
+  background-color: #5a42b8;
+}
+
+.results-list {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.content {
+  flex: 1;
+  margin-right: 16px;
+  line-height: 1.5em;
+}
+
+.content h4 {
+  margin: 0 0 8px 0;
+  font-weight: 600;
+  font-size: 1.3em;
+}
+
+.preview-box {
+  width: 150px;
+  background: #ccc;
+  color: #444;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  user-select: none;
+  font-size: 1em;
+}
+
+.no-results {
+  font-size: 1.2em;
+  color: #999;
+  margin-top: 30px;
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+}
+
+.pagination button {
+  cursor: pointer;
+  border: none;
+  background: #765ce6;
+  color: white;
+  padding: 10px 18px;
+  border-radius: 6px;
+  user-select: none;
+  font-size: 1.1em;
+  transition: background-color 0.2s;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination button:hover:not(:disabled) {
+  background-color: #5a42b8;
+}
+</style>