feat: 新增搜索标签页面及相关功能
refactor: 优化搜索页面样式和交互逻辑 style: 调整热门标签和热门搜索组件样式 fix: 修复登录状态判断逻辑 chore: 更新图片资源和SVG图标 docs: 更新README文档 test: 添加搜索功能测试用例 build: 更新依赖包版本 ci: 配置自动化测试和部署流程 perf: 优化页面加载性能和响应速度
This commit is contained in:
29
component/hot-search/hot-search.js
Normal file
29
component/hot-search/hot-search.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象(因在 HTML 中通过 script 引入,Vue 已挂载到 window)
|
||||
const { defineComponent, ref, onMounted } = Vue;
|
||||
// 定义组件(直接使用模板)
|
||||
export const hotSearch = defineComponent({
|
||||
name: "hot-search",
|
||||
props: {},
|
||||
|
||||
setup(props) {
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
ajaxget("/v2/api/forum/getHotSearchWords?limit=20").then((res) => {
|
||||
const data = res.data;
|
||||
list.value = data || [];
|
||||
});
|
||||
};
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
return { list };
|
||||
},
|
||||
|
||||
components: {},
|
||||
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-violet.svg" /> 热门搜索 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a> </div></div>`,
|
||||
});
|
||||
9
component/hot-search/hot-search.txt
Normal file
9
component/hot-search/hot-search.txt
Normal file
@@ -0,0 +1,9 @@
|
||||
<div class="hot-tag" v-if="list.length > 0">
|
||||
<div class="hot-tag-title">
|
||||
<img class="icon" src="./img/triangle-violet.svg" />
|
||||
热门搜索
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,21 +1,29 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象(因在 HTML 中通过 script 引入,Vue 已挂载到 window)
|
||||
const { defineComponent, ref } = Vue;
|
||||
const { defineComponent, ref, onMounted } = Vue;
|
||||
// 定义组件(直接使用模板)
|
||||
export const hotTag = defineComponent({
|
||||
name: "hot-tag",
|
||||
props: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
props: {},
|
||||
|
||||
setup(props) {
|
||||
return {};
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
ajaxget("/v2/api/forum/getHotTags?limit=20").then((res) => {
|
||||
const data = res.data;
|
||||
list.value = data || [];
|
||||
});
|
||||
};
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
return { list };
|
||||
},
|
||||
|
||||
components: {},
|
||||
|
||||
template: `<div class="hot-tag"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <div class="item">热门标签</div> </div></div>`,
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<div class="hot-tag">
|
||||
<div class="hot-tag" v-if="list.length > 0">
|
||||
<div class="hot-tag-title">
|
||||
<img class="icon" src="./img/triangle-orange.svg" />
|
||||
热门标签
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item">热门标签</div>
|
||||
<a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -58,7 +58,7 @@ export const itemOffer = defineComponent({
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
|
||||
if (window["userInfoWin"]["uid"]) isLogin.value = true;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
|
||||
@@ -21,7 +21,7 @@ export const slideshowBox = defineComponent({
|
||||
|
||||
let latestList = ref({});
|
||||
const getTopicLatest = () => {
|
||||
ajaxget(`/v2/api/forum/getTopicLatest`).then((res) => {
|
||||
ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
|
||||
const data = res.data || [];
|
||||
|
||||
data.vote.forEach((item) => {
|
||||
@@ -78,5 +78,5 @@ export const slideshowBox = defineComponent({
|
||||
return { tabItem, tabPitch, tabPitch, latestList };
|
||||
},
|
||||
|
||||
template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
<img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
<a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
<img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
<a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
<img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,7 +82,7 @@
|
||||
|
||||
<a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank">
|
||||
<div>more</div>
|
||||
<img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
|
||||
<img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user