feat: 新增图片资源及组件功能优化

style: 调整CSS样式及修复链接样式问题

refactor: 重构item-head和item-bottom组件逻辑

fix: 修复section-index页面导航链接问题

perf: 优化滚动加载及URL参数处理

docs: 更新组件文档及注释

test: 添加组件测试用例

build: 更新依赖配置

chore: 清理无用代码及资源

component/slideshow-box/slideshow-box.js

@@ -0,0 +1,82 @@
+// my-component.js
+// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
+const { defineComponent, ref, onMounted, nextTick } = Vue;
+
+// 定义组件（直接使用模板）
+export const slideshowBox = defineComponent({
+    name: "slideshowBox",
+    props: {
+        itemdata: {
+            type: Object,
+            default: () => {},
+        },
+    },
+
+    setup(props) {
+        let item = ref({ ...props.itemdata });
+
+        onMounted(() => getTopicLatest());
+
+        let tabPitch = ref("offer"); // offer vote interviewexperience
+
+        let latestList = ref({});
+        const getTopicLatest = () => {
+            ajaxget(`/v2/api/forum/getTopicLatest`).then((res) => {
+                const data = res.data || [];
+
+                data.vote.forEach((item) => {
+                    if (!item.title) {
+                        item.title = item.content;
+                        item.content = "";
+                    }
+                });
+
+                latestList.value = data;
+
+                nextTick(() => {
+                    tabItem(tabArr[Math.floor(Math.random() * tabArr.length)]);
+                });
+            });
+        };
+
+        const tabArr = ["thread", "offer", "vote", "interviewexperience"];
+
+        const tabItem = (key) => {
+            if (key == tabPitch.value) return;
+
+            const boxbox = document.querySelector(`.box-box`);
+            boxbox.classList.add(`box-${key}`);
+            let index = tabArr.indexOf(key);
+
+            // 修改 tab 状态的
+            if (tabPitch.value) {
+                let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${tabPitch.value}`);
+                oldNode.classList.toggle("pitch");
+                boxbox.classList.remove(`box-${tabPitch.value}`);
+            }
+
+            let targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`);
+
+            targetTabNode.classList.toggle("pitch");
+            let targetHeight = targetTabNode.offsetHeight;
+
+            // 修改全局背景状态的
+            let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
+            let targetContentHeight = targetContentNode.offsetHeight;
+
+            boxbox.style.height = targetContentHeight + 66 + "px";
+
+            let slideshowContent = boxbox.querySelector(".slideshow-content");
+            slideshowContent.scrollTo({
+                left: 272 * index,
+                behavior: "smooth",
+            });
+
+            tabPitch.value = key;
+        };
+
+        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>`,
+});