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

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

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

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

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

docs: 更新组件文档及注释

test: 添加组件测试用例

build: 更新依赖配置

chore: 清理无用代码及资源

component/latest-list/latest-list.js

@@ -0,0 +1,103 @@
+// my-component.js
+// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
+const { defineComponent, ref, onMounted, nextTick } = Vue;
+import { itemBottom } from "../item-bottom/item-bottom.js";
+import { itemHead } from "../item-head/item-head.js";
+
+// 定义组件（直接使用模板）
+export const latestList = defineComponent({
+    name: "latestList",
+    props: {
+        itemdata: {
+            type: Object,
+            default: () => {},
+        },
+    },
+
+    setup(props) {
+        let item = ref({ ...props.itemdata });
+        let postsTab = ref("newest"); // newest  essence
+
+        onMounted(() => {
+            getTopicLatest();
+            topicHandpicked();
+        });
+
+        let count = 0;
+
+        let latestList = ref([]);
+        const getTopicLatest = () => {
+            ajaxget(`/v2/api/forum/getTopicLatest?type=thread`).then((res) => {
+                const data = res.data;
+                const list = data.thread || [];
+                latestList.value = list;
+
+                nextTick(() => {
+                    count += 1;
+                    examineCount();
+                });
+            });
+        };
+
+        let topList = ref([]);
+        const topicHandpicked = () => {
+            ajaxget(`/v2/api/forum/topicHandpicked`).then((res) => {
+                const data = res.data;
+                topList.value = data;
+                nextTick(() => {
+                    count += 1;
+                    examineCount();
+                });
+            });
+        };
+
+        // 检验 count 是否等于 2
+        function examineCount() {
+            if (count == 2) tabPostsItem(tabPostsArr[Math.floor(Math.random() * tabPostsArr.length)]);
+        }
+
+        const tabPostsArr = ["newest", "essence"];
+        const tabPostsItem = (key) => {
+            if (key == postsTab.value) return;
+
+            const boxbox = document.querySelector(`.posts-box`);
+            boxbox.classList.add(`box-${key}`);
+
+            let index = tabPostsArr.indexOf(key);
+
+            // 修改 tab 状态的
+            if (postsTab.value) {
+                let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${postsTab.value}`);
+                oldNode.classList.toggle("pitch");
+                boxbox.classList.remove(`box-${postsTab.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: 290 * index,
+                behavior: "smooth",
+            });
+
+            postsTab.value = key;
+        };
+
+        return { tabPostsItem, postsTab, topList, latestList, item };
+    },
+
+    components: {
+        itemBottom,
+        itemHead,
+    },
+
+    template: `<div class="posts-box box-newest">    <div class="slideshow-box">        <div class="tab-list flexacenter">            <div class="tab-item newest " :class="{'pitch': postsTab == 'newest'}" @click="tabPostsItem('newest')">最新</div>            <div class="tab-item essence" :class="{'pitch': postsTab == 'essence'}" @click="tabPostsItem('essence')">精华</div>        </div>    </div>    <div class="slideshow-content flexflex">        <!-- newest 最新 -->        <div class="newest-side-box side-box">            <img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt="">            <div class="box">                <a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2646177-1-1.html" target="_blank">                    <div class="dot dot-green"></div>                    <div class="text one-line-display">{{ item.title }}</div>                </a>            </div>        </div>        <!-- essence 精选 -->        <div class="essence-side-box side-box">            <img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt="">            <div class="box">                <a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2640196-1-1.html" target="_blank">                    <div class="dot"></div>                    <div class="text one-line-display">{{ item.title }}</div>                </a>            </div>        </div>    </div></div>`,
+});