配置环境变量和axios，完善首页轮播效果和全局查询

.env.development

@@ -0,0 +1,5 @@
+# 开发环境配置
+NODE_ENV=development  # 环境标识
+VITE_BASE_URL=http://localhost:3000  # API基础URL（根据你的后端服务地址调整）
+VITE_API_TIMEOUT=50000  # API请求超时时间（毫秒）
+VITE_APP_NAME="音视频门户"  # 应用名称

src/components/HeaderNav.vue

@@ -5,12 +5,12 @@ import router from "@/router/index.js";
 import {useRoute} from "vue-router";
 import Mask from "@/components/Mask.vue";
 
-const activeMenuIndex=ref(localStorage.getItem('activeMenu') || null)
+const activeMenuIndex=ref(sessionStorage.getItem('activeMenu') || null)
 const menuKey = ref(0)
 const route=useRoute()
 // 选中逻辑
 const handleSelect = (key, keyPath) => {
-    localStorage.setItem('activeMenu',key)
+    sessionStorage.setItem('activeMenu',key)
 
 }
 const loadActiveMenu=()=>{
@@ -58,7 +58,7 @@ const searchEvent=()=>{
     activeMenuIndex.value=null
     menuKey.value += 1 //强制刷新
     router.push({path:'/search',query:{keyword:input1.value}}).then(()=>{
-      localStorage.setItem('activeMenu',route.fullPath)
+      sessionStorage.setItem('activeMenu',route.fullPath)
     })
 
   }

src/components/home/TechnologyCore.vue

@@ -1,6 +1,6 @@
 <script setup>
 //核心技术
-import {onMounted, reactive, ref} from "vue";
+import {nextTick, onMounted, reactive, ref} from "vue";
 import img from '/src/assets/img/tc-img1.png'
 const tcSwiperItem=reactive([
   {
@@ -55,6 +55,7 @@ const tcSwiperItem=reactive([
 let hoverTime = null
 const tcSwiperRef = ref()
 const currentIndex = ref(0)
+const isAutoplay = ref(true)
 const showSwiper = (index) => {
   // 如果有定时器，先清除
   if (hoverTime) {
@@ -74,7 +75,13 @@ const goToSlide = (index) => {
     // 如果需要直接操作轮播组件（兼容性）
     if (tcSwiperRef.value && tcSwiperRef.value.setActiveItem) {
       tcSwiperRef.value.setActiveItem(index)
+      isAutoplay.value = false;
+      // 使用nextTick确保DOM更新后再启用
+      nextTick(() => {
+        isAutoplay.value = true;
+      });
     }
+
   }
 }
 onMounted(() => {
@@ -112,7 +119,7 @@ const tcSwiperChange=(current,perv)=>{
       <el-col :offset="3" :span="12">
         <div class="tc-right">
           <div class="img">
-            <el-carousel ref="tcSwiperRef" v-model:current-index="currentIndex" class="tc-swiper" indicator-position="outside" height="635px" :autoplay="false" :arrow="'never'" @change="tcSwiperChange">
+            <el-carousel ref="tcSwiperRef"  class="tc-swiper" indicator-position="outside" height="635px" :autoplay="isAutoplay" :arrow="'never'" @change="tcSwiperChange" :interval="3000">
               <el-carousel-item v-for="(item,index) in tcSwiperItem" :key="index">
                 <img :src=item.src alt="">
                 <div class="content">

src/utils/api.js

@@ -0,0 +1,41 @@
+import axios from 'axios'
+import * as logger from "echarts/types/src/util/log.js";
+
+const request =axios.create({
+    baseURL: import.meta.env.BASE_URL,
+    timeout: import.meta.env.VITE_API_TIMEOUT || 50000,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+})
+
+//  请求拦截器
+request.interceptors.request.use(function (config) {
+    const token = localStorage.getItem('token')
+    if(token){
+        config.headers['Authorization'] = token
+    }
+    // 在发送请求之前做些什么
+    return config;
+}, function (error) {
+    logger.error('请求错误:', error);
+    // 对请求错误做些什么
+    return Promise.reject(error);
+})
+
+// 响应拦截器
+request.interceptors.response.use(function (res) {
+    // 对响应数据做点什么
+    if(res.data.code === 401){
+        logger.error('未授权，请重新登录');
+        // 清除token
+        localStorage.removeItem('token');
+        // 跳转到登录页
+        window.location.href = '/login';
+        //刷新当前页面
+        window.location.reload();
+    }
+    return res;
+})
+
+export default request

src/views/SearchResults.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import {Search} from "@element-plus/icons-vue";
-import {nextTick, ref} from "vue";
+import {nextTick, onBeforeUnmount, ref, watch} from "vue";
 import {useRouter,useRoute} from "vue-router";
 import ResultItem from "@/components/SearchResults/ResultItem.vue";
 import img from "@/assets/img/search1.png"
@@ -11,31 +11,71 @@ import Classify from "@/components/SearchResults/Classify.vue";
 
 const router=useRouter()
 const route=useRoute()
-
+const searchKey=ref(route.query.keyword ||sessionStorage.getItem('searchKey') || '')
-const searchKey=ref(route.query.keyword ||localStorage.getItem('searchKey') || '')
-if(route.query.keyword){
-  localStorage.setItem('searchKey',route.query.keyword)
-}
-
 const input=ref(searchKey.value)
-const searchEvent=()=>{
+// 2. 分类筛选管理
-  if(input.value){
+const activeClassify = ref(route.query.classify || sessionStorage.getItem('activeClassify') || '全部');
-    // 保存搜索词到本地存储
+const currentPage = ref(Number(route.query.page) || Number(sessionStorage.getItem('currentPage')) || 1);
-    console.log(route)
 
+// 4. 监听路由参数变化，更新状态和会话存储
+watch(() => route.query, (newQuery) => {
+  if (newQuery.keyword) {
+    searchKey.value = newQuery.keyword;
+    input.value = newQuery.keyword;
+    // 使用sessionStorage，只在当前会话内有效
+    sessionStorage.setItem('searchKey', newQuery.keyword);
+  }
 
-    localStorage.setItem('searchKey',input.value)
+  if (newQuery.classify) {
+    activeClassify.value = newQuery.classify;
+    sessionStorage.setItem('activeClassify', newQuery.classify);
+  }
+
+  if (newQuery.page) {
+    currentPage.value = Number(newQuery.page);
+    sessionStorage.setItem('currentPage', newQuery.page);
+  }
+}, { immediate: true });
 
+//修改分类
+const changeClassify=(classify)=>{
+  currentPage.value = 1;
+  router.push({
+    path: '/search',
+    query: {
+      keyword: searchKey.value,
+      classify: classify,
+      page: '1'
+    }
+  });
+}
+const searchEvent=()=>{
+  if(input.value){
+    currentPage.value = 1;
     // 跳转到搜索结果页面并携带搜索词参数
     router.push({
       path:'/search',
-      query:{keyword:input.value}
+      query: {
+        keyword: input.value,
+        classify: '全部',
+        page: '1'
+      }
     }).then(()=>{
-      localStorage.setItem('activeMenu',route.fullPath)
+      sessionStorage.setItem('activeMenu',route.fullPath)
     })
   }
 }
-
+// 7. 分页变化处理
+const handlePageChange = (page) => {
+  router.push({
+    path: '/search',
+    query: {
+      keyword: searchKey.value,
+      classify: activeClassify.value,
+      page: page.toString()
+    }
+  });
+};
 
 //模拟数据
 const searchResults=ref([
@@ -76,10 +116,8 @@ const classifyList=ref([
   {label:'服务交流',value:'关于我们',count:16},
   {label:'公司&新闻',value:'公司&新闻',count:8},
 ])
-const activeClassify=ref('全部')
+
-const changeClassify=(classify)=>{
+
-  activeClassify.value=classify
-}
 </script>
 
 <template>
@@ -104,7 +142,7 @@ const changeClassify=(classify)=>{
          <div class="total">256条结果</div>
          <ResultItem v-for="item in searchResults" :key="item.href" :item="item" :searchKey="input"></ResultItem>
          <el-empty description="暂时还没有数据呢"  v-if="searchResults.length === 0"/>
-         <el-pagination default-page-size="5" class="pagination"  layout="prev, pager, next" :total="256" />
+         <el-pagination v-model:current-page="currentPage"  @current-change="handlePageChange" default-page-size="5" class="pagination"  layout="prev, pager, next" :total="256" />
       </div>
   </div>
 

vite.config.js

@@ -15,6 +15,16 @@ export default defineConfig({
       babelPlugins: []
     })
   ],
+  // server:{
+  //   proxy: {
+  //     '/api': {
+  //       target: process.env.VITE_BASE_URL,
+  //       changeOrigin: true,
+  //       secure: false,
+  //       rewrite: (path) => path.replace(/^\/api/, ''),
+  //     },
+  //   },
+  // },
   build: {
     chunkSizeWarningLimit: Infinity, // 完全禁用警告
   },