From 5cdbeb249f3abf98b0af939c2335ec2a25f6a917 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Mon, 10 Nov 2025 19:06:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 使用sticky定位替代fixed定位，提升滚动体验 - 添加视频播放图标和图片展示功能 - 实现搜索框热门关键词轮播效果 - 优化编辑器链接插入功能 - 调整组件样式和布局细节 --- component/head-top/head-top.js | 96 +++++++- component/head-top/head-top.txt | 40 +--- component/item-forum/item-forum.js | 2 +- component/item-forum/item-forum.txt | 9 +- component/item-head/item-head.js | 2 +- component/item-head/item-head.txt | 2 +- css/bi.css | 106 ++++----- css/bi.less | 335 ++++++++++++---------------- css/details.css | 13 +- css/details.less | 19 +- css/index.css | 8 +- css/index.less | 14 +- css/public.css | 41 +++- css/public.less | 49 +++- css/search-tag.css | 3 + css/search-tag.less | 5 +- css/search.css | 13 +- css/search.less | 27 ++- css/section.css | 8 +- css/section.less | 13 +- img/videoplay.png | Bin 0 -> 2238 bytes index.html | 2 +- js/edit.js | 33 ++- js/index.js | 7 +- js/search.js | 39 ++-- search.html | 4 +- 26 files changed, 517 insertions(+), 373 deletions(-) create mode 100644 img/videoplay.png diff --git a/component/head-top/head-top.js b/component/head-top/head-top.js index 58e2673..0f899f4 100644 --- a/component/head-top/head-top.js +++ b/component/head-top/head-top.js @@ -1,6 +1,6 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref, onMounted, nextTick } = Vue; +const { defineComponent, ref, onMounted, onUnmounted, nextTick } = Vue; // 定义组件（直接使用模板） export const headTop = defineComponent({ @@ -13,10 +13,95 @@ export const headTop = defineComponent({ }, setup(props) { + // 轮播相关状态 + let currentIndex = ref(0); // 当前显示的关键词索引 + let carouselTimer = ref(null); // 轮播定时器 + let isPaused = ref(false); // 是否暂停轮播 + onMounted(() => { getHistorySearch(); + // 写一个函数 ，判断本地缓存有没有 wConfig 并判断 是否过一天 如果过了一天 则更新 wConfig + checkWConfig(); + + // 启动轮播 + startCarousel(); }); + // 启动轮播函数 + const startCarousel = () => { + // 清除已有的定时器 + if (carouselTimer.value) { + clearInterval(carouselTimer.value); + } + + // 设置新的定时器，每秒滚动一次 + carouselTimer.value = setInterval(() => { + if (!searchInputState.value && hotSearchWords.value.length > 1) { + // 当滚动到复制的数据部分时，进行无缝切换 + if (currentIndex.value >= hotSearchWords.value.length - 1) { + // 先滚动到复制的数据 + currentIndex.value++; + // 在下一帧，当动画完成后，立即切换回对应的数据索引位置，但不带动画 + setTimeout(() => { + if (!searchInputState.value) { + currentIndex.value = 0; + // 强制重新渲染以重置位置 + nextTick(() => { + // 继续正常滚动 + }); + } + }, 2300); + } else { + currentIndex.value++; + } + } + }, 2300); + }; + + // 暂停轮播 + const pauseCarousel = () => { + isPaused.value = true; + }; + + // 恢复轮播 + const resumeCarousel = () => { + isPaused.value = false; + }; + + // 组件卸载时清理定时器 + const onUnmounted = () => { + if (carouselTimer.value) { + clearInterval(carouselTimer.value); + } + }; + + let hotSearchWords = ref([]); + + const checkWConfig = () => { + const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {}; + if (wConfig.time) { + const time = new Date(wConfig.time); + const now = new Date(); + if (now - time > 24 * 60 * 60 * 1000) getWConfig(); + else { + hotSearchWords.value = wConfig.hotSearchWords || []; + } + } else { + getWConfig(); + } + }; + + const getWConfig = () => { + ajaxGet("/v2/api/config/website").then((res) => { + if (res.code == 200) { + let data = res["data"] || {}; + hotSearchWords.value = data.hotSearchWords || {}; + data.time = new Date().toISOString(); + localStorage.setItem("wConfig", JSON.stringify(data)); + } + }); + }; + let state = ref(0); // 是否已经签到 let userInfoWinTimerCount = 0; @@ -50,19 +135,18 @@ export const headTop = defineComponent({ // console.log("page", page.value); let input = ref(""); - let defaultSearchText = ref("屯特"); let historySearchList = ref([]); // 历史搜索数据 // 获取历史搜索 const getHistorySearch = () => { const data = JSON.parse(localStorage.getItem("history-search")) || []; - console.log("data", data); historySearchList.value = data; }; // 跳转搜索 const searchEvent = (value) => { - const kw = value || input.value || defaultSearchText.value; + const kw = value || input.value || hotSearchWords.value[currentIndex.value]?.keyword || ""; + if (!kw) return; historySearchList.value.unshift(kw); historySearchList.value = [...new Set(historySearchList.value)]; if (historySearchList.value.length > 10) historySearchList.value = historySearchList.value.splice(0, 10); @@ -87,8 +171,8 @@ export const headTop = defineComponent({ }, 200); }; - return { historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, defaultSearchText }; + return { hotSearchWords, historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, currentIndex, pauseCarousel, resumeCarousel }; }, - template: `
历史搜索
{{ item }}
`, + template: `
大家都在搜：{{ item.keyword }}
大家都在搜：{{ item.keyword }}
历史搜索
{{ item }}
`, }); diff --git a/component/head-top/head-top.txt b/component/head-top/head-top.txt index f567c12..8035406 100644 --- a/component/head-top/head-top.txt +++ b/component/head-top/head-top.txt @@ -4,42 +4,22 @@
- - - +
+
大家都在搜：{{ item.keyword }}
+
大家都在搜：{{ item.keyword }}
+
+
历史搜索
{{ item }}
-
+
-
- - - - - - - - - - - - - - - -
-