A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加BI组件并优化多个页面样式和功能

Browse Source 
refactor: 重构slideshow-box组件，移除帖子标签

fix: 修复item-bottom组件中QR码加载状态显示问题

style: 调整多个页面的CSS样式，包括字体大小和间距

perf: 优化save.js文件同步逻辑，支持更多模板格式

docs: 更新组件文档和注释

chore: 添加bi组件相关文件并配置监听同步

test: 更新测试用例以适应组件变更
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-07 19:42:19 +08:00
parent 5c199bb8fe
commit dc871d80c0
28 changed files with 768 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
component/slideshow-box/slideshow-box.js
View File

@@ -17,7 +17,7 @@ export const slideshowBox = defineComponent({
onMounted(() => getTopicLatest());
let tabPitch = ref("thread"); // thread offer vote interviewexperience
let tabPitch = ref(""); // thread offer vote interviewexperience
let latestList = ref({});
const getTopicLatest = () => {
@@ -25,8 +25,8 @@ export const slideshowBox = defineComponent({
const data = res.data || [];
(data.vote || []).forEach((item) => {
if (!item.title) {
item.title = item.content;
item.content = "";
// item.title = item.content;
// item.content = "";
}
});
@@ -38,9 +38,10 @@ export const slideshowBox = defineComponent({
});
};
const tabArr = ["thread", "offer", "vote", "interviewexperience"];
const tabArr = ["offer", "vote", "interviewexperience"];
// const tabArr = ["thread", "offer", "vote", "interviewexperience"];
const tabItem = (key) => {
const tabItem = (key) => {
if (key == tabPitch.value) return;
const boxbox = document.querySelector(`.box-box`);
@@ -62,6 +63,7 @@ export const slideshowBox = defineComponent({
// 修改全局背景状态的
let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
let targetContentHeight = targetContentNode.offsetHeight;
console.log("targetContentHeight", targetContentHeight);
boxbox.style.height = targetContentHeight + 66 + "px";
@@ -78,5 +80,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="'/details/' + item.uniqid"> <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.uniqid" class="item flexflex" :href="'/details/' + item.uniqid" 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.uniqid" class="item flexflex vuehide" target="_blank" :href="'/details/' + item.uniqid"> <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="'/details/' + item.uniqid" 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>`,
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="'/details/' + item.uniqid"> <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.uniqid" class="item flexflex" :href="'/details/' + item.uniqid" 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.uniqid" class="item flexflex vuehide" target="_blank" :href="'/details/' + item.uniqid"> <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="'/details/' + item.uniqid" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display">{{ item.data.project }}</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>`,
});

8
component/slideshow-box/slideshow-box.txt
View File

@@ -1,7 +1,7 @@
<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 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>
@@ -9,7 +9,7 @@
</div>
<div class="slideshow-content flexflex">
<!-- 问答 -->
<div class="thread-side-box side-box">
<!-- <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="'/details/' + item.uniqid">
<div class="question flexacenter">
@@ -27,7 +27,7 @@
<img class="" style="margin-left: 8px;" src="/img/right-arrow-black.svg">
</a>
</div>
</div>
</div> -->
<!-- offer -->
<div class="offer-side-box side-box">
<div class="box">
@@ -73,7 +73,7 @@
<div class="box">
<a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'/details/' + item.uniqid" target="_blank">
<div class="school one-line-display">{{ item.data.schoolname }}</div>
<div class="major one-line-display"></div>
<div class="major one-line-display">{{ item.data.project }}</div>
<div class="info">
<img class="icon" :src="item.user.avatar" />
<span class="text">{{ item.title || item.content }} </span>