From 43556292d25255f5449eb781aafeebb8045067fb Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Mon, 22 Dec 2025 19:01:00 +0800 Subject: [PATCH] =?UTF-8?q?fix(component):=20=E4=BF=AE=E5=A4=8D=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=90=8D=E7=A7=B0=E9=94=99=E8=AF=AF=E5=92=8Cprops?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor(component): 重构组件模板结构，移除重复代码 feat(component): 添加可选props支持外部数据传入 style(css): 优化样式布局和响应式设计 fix(js): 修复URL路径处理逻辑和滚动加载问题 feat(search): 新增搜索页推荐内容和空状态处理 chore: 添加新图标资源文件 --- component/helper-pop/helper-pop.js | 2 +- component/hot-search/hot-search.js | 31 +++- component/hot-search/hot-search.txt | 2 +- component/hot-tag/hot-tag.js | 27 +++- component/hot-tag/hot-tag.txt | 2 +- component/huddle-box/huddle-box.js | 2 +- component/item-bottom/item-bottom.js | 12 +- component/item-bottom/item-bottom.txt | 98 +++++++------ component/item-head/item-head.js | 2 +- component/item-head/item-head.txt | 132 ++++++++--------- component/item-mj/item-mj.js | 2 +- component/item-mj/item-mj.txt | 2 +- component/item-offer/item-offer.js | 2 +- component/item-offer/item-offer.txt | 2 +- component/item-summary/item-summary.js | 2 +- component/item-summary/item-summary.txt | 6 +- component/load-box/load-box.js | 2 +- css/public.css | 16 +- css/public.less | 21 ++- css/search.css | 164 ++++++++++++++++++++- css/search.less | 186 +++++++++++++++++++++++- img/triangle-blue.svg | 6 + img/triangle-yellow.svg | 6 + js/public.js | 26 +++- js/search.js | 105 +++++++++++-- searchV2.html | 150 ++++++++++++------- 26 files changed, 783 insertions(+), 225 deletions(-) create mode 100644 img/triangle-blue.svg create mode 100644 img/triangle-yellow.svg diff --git a/component/helper-pop/helper-pop.js b/component/helper-pop/helper-pop.js index 3292e3f..6c722fc 100644 --- a/component/helper-pop/helper-pop.js +++ b/component/helper-pop/helper-pop.js @@ -4,7 +4,7 @@ const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue; // 定义组件（直接使用模板） export const helperPop = defineComponent({ - name: "item-bottom", + name: "helper-pop", props: {}, setup(props) { diff --git a/component/hot-search/hot-search.js b/component/hot-search/hot-search.js index a4f776c..5bfe083 100644 --- a/component/hot-search/hot-search.js +++ b/component/hot-search/hot-search.js @@ -1,20 +1,41 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref, onMounted } = Vue; +const { defineComponent, ref, onMounted, watch } = Vue; // 定义组件（直接使用模板） export const hotSearch = defineComponent({ name: "hot-search", - props: {}, + props: { + isnorequestdata: { + type: Boolean, + }, + + searchlist: { + type: Array, + }, + }, setup(props) { let valueUrl = ref(""); onMounted(() => { - init(); + if (!props.isnorequestdata) init(); const valueA = document.querySelector(".valueA"); valueUrl.value = valueA.innerText; }); + const list = ref([]); + + watch( + () => props.searchlist, + (newVal) => { + if (newVal) list.value = newVal; + }, + { + deep: true, // 核心：开启深度监听（监听对象/数组内部属性变化） + immediate: true, // 可选：组件挂载时立即执行一次回调（根据需求决定） + } + ); + const init = () => { ajaxGet("/v2/api/forum/getHotSearchWords?limit=20").then((res) => { const data = res.data; @@ -22,12 +43,10 @@ export const hotSearch = defineComponent({ }); }; - const list = ref([]); - return { valueUrl, list }; }, components: {}, - template: `
热门搜索
{{ item.keyword }}
`, + template: `
热门搜索
{{ item.keyword }}
`, }); diff --git a/component/hot-search/hot-search.txt b/component/hot-search/hot-search.txt index 86c0920..ac2db8f 100644 --- a/component/hot-search/hot-search.txt +++ b/component/hot-search/hot-search.txt @@ -1,4 +1,4 @@ -
+
热门搜索 diff --git a/component/hot-tag/hot-tag.js b/component/hot-tag/hot-tag.js index b5e0e6d..bceb481 100644 --- a/component/hot-tag/hot-tag.js +++ b/component/hot-tag/hot-tag.js @@ -1,16 +1,23 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref, onMounted } = Vue; +const { defineComponent, ref, onMounted, emit, watch } = Vue; // 定义组件（直接使用模板） export const hotTag = defineComponent({ name: "hot-tag", - props: {}, + props: { + isnorequestdata: { + type: Boolean, + }, + taglist: { + type: Array, + }, + }, setup(props) { let valueUrl = ref(""); onMounted(() => { - init(); + if (!props.isnorequestdata) init(); const valueA = document.querySelector(".valueA"); valueUrl.value = valueA.innerText; }); @@ -24,10 +31,22 @@ export const hotTag = defineComponent({ const list = ref([]); + watch( + () => props.taglist, + (newVal) => { + if (newVal) list.value = newVal; + }, + { + deep: true, // 核心：开启深度监听（监听对象/数组内部属性变化） + immediate: true, // 可选：组件挂载时立即执行一次回调（根据需求决定） + } + ); + + return { valueUrl, list }; }, components: {}, - template: `
热门标签
{{ item.tagname }}
`, + template: `
热门标签
{{ item.tagname }}
`, }); diff --git a/component/hot-tag/hot-tag.txt b/component/hot-tag/hot-tag.txt index 25d52c9..653bc15 100644 --- a/component/hot-tag/hot-tag.txt +++ b/component/hot-tag/hot-tag.txt @@ -1,4 +1,4 @@ -
+
热门标签 diff --git a/component/huddle-box/huddle-box.js b/component/huddle-box/huddle-box.js index 1dbefb3..2d4c6cb 100644 --- a/component/huddle-box/huddle-box.js +++ b/component/huddle-box/huddle-box.js @@ -4,7 +4,7 @@ const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue; // 定义组件（直接使用模板） export const huddleBox = defineComponent({ - name: "item-bottom", + name: "huddle-box", props: {}, setup(props) { diff --git a/component/item-bottom/item-bottom.js b/component/item-bottom/item-bottom.js index ea868f3..415ef92 100644 --- a/component/item-bottom/item-bottom.js +++ b/component/item-bottom/item-bottom.js @@ -17,25 +17,25 @@ export const itemBottom = defineComponent({ setup(props) { let valueUrl = ref(""); - let isMobile = ref(false) + let isMobile = ref(false); onMounted(() => { const valueA = document.querySelector(".valueA"); valueUrl.value = valueA.innerText; - isMobile.value = window.isMobile + isMobile.value = window.isMobile; }); let item = ref({ ...props.itemdata }); let isLogin = inject("isLogin"); let userInfoWin = inject("userInfoWin"); - let realname = inject("realname"); + let realname = inject("realname", null); let goLogin = inject("goLogin"); let openAttest = inject("openAttest"); let isLikeGif = ref(false); - let cancelOperate = inject("cancelOperate"); + let cancelOperate = inject("cancelOperate", () => {}); const likeClick = () => { if (realname.value == 0 && userInfoWin.value?.uin > 0) { @@ -50,7 +50,7 @@ export const itemBottom = defineComponent({ const token = item.value.token || ""; - if (["offer", "offer_summary", "interviewexperience"].includes(itemvalue["type"]) && item.value["is_like"]) { + if (["offer", "offer_summary", "interviewexperience"].includes(item.value["type"]) && item.value["is_like"]) { creationAlertBox("error", "不可取消点赞"); return; } @@ -154,5 +154,5 @@ export const itemBottom = defineComponent({ like, }, - template: `
{{ item?.commentreviews?.content || "[图]" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
`, + template: `
{{ item?.commentreviews?.content || "[图]" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
`, }); diff --git a/component/item-bottom/item-bottom.txt b/component/item-bottom/item-bottom.txt index f8d7dd5..d4ea762 100644 --- a/component/item-bottom/item-bottom.txt +++ b/component/item-bottom/item-bottom.txt @@ -1,60 +1,62 @@ - - -
{{ item?.commentreviews?.content || "[图]" }}
- - -
- + +
+ -
- - -
{{ item.collections || "收藏" }}
-
+
+ + +
{{ item.collections || "收藏" }}
+
- - -
{{ item.comments || "讨论" }}
- + + +
{{ item.comments || "讨论" }}
+ - - -
{{ item.coins || "投币" }}
- + + +
{{ item.coins || "投币" }}
+ - -