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

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

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

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

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

docs: 更新组件文档及注释

test: 添加组件测试用例

build: 更新依赖配置

chore: 清理无用代码及资源

js/details.js

@@ -1,38 +1,99 @@
-const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
 import { itemForum } from "../component/item-forum/item-forum.js";
 import { itemOffer } from "../component/item-offer/item-offer.js";
 import { itemSummary } from "../component/item-summary/item-summary.js";
 import { itemVote } from "../component/item-vote/item-vote.js";
 import { itemMj } from "../component/item-mj/item-mj.js";
 import { itemTenement } from "../component/item-tenement/item-tenement.js";
+import { latestList } from "../component/latest-list/latest-list.js";
+import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
+import { like } from "../component/like/like.js";
 
 const appSectionIndex = createApp({
     setup() {
         let signInAlreadyState = ref(false);
 
+        let permissions = ref([]);
+
+        onMounted(() => {
+            getUserInfoWin();
+
+            setTimeout(() => (permissions.value = window["permissions"] || []), 1000);
+        });
+
+        let isLogin = ref(true);
+        let realname = ref(1); // 是否已经实名
+        let userInfoWin = ref({
+            authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
+            avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
+            groupid: 3,
+            nickname: "肖荣豪",
+            realname: 1,
+            token: "01346a38444d71aaadb3adad52b52c39",
+            uid: 500144,
+            uin: 4238049,
+        });
+
+        const getUserInfoWin = () => {
+            const checkUser = () => {
+                const user = window.userInfoWin;
+                if (!user) return;
+                document.removeEventListener("getUser", checkUser);
+                realname.value = user.realname;
+                userInfoWin.value = user;
+                if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
+            };
+            document.addEventListener("getUser", checkUser);
+        };
+
+        const openAttest = () => {
+            const handleAttestClose = () => {
+                document.removeEventListener("closeAttest", handleAttestClose);
+                realname.value = window.userInfoWin?.realname || 0;
+            };
+            // 启动认证流程时添加监听
+            document.addEventListener("closeAttest", handleAttestClose);
+            loadAttest(2);
+        };
+
+        // 跳转登录
+        const goLogin = () => {
+            if (typeof window === "undefined") return;
+            if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
+                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                else ajax_login();
+            } else ajax_login();
+        };
+
+        provide("isLogin", isLogin);
+        provide("userInfoWin", userInfoWin);
+        provide("realname", realname);
+        provide("openAttest", openAttest);
+        provide("goLogin", goLogin);
+
         let authorInfo = ref({});
         let info = ref({});
         let ismyself = ref(false);
-        let labelList = ref({
-            sectionn: "",
-            tags: [],
-        });
 
         let timestamp = ref("");
         let updatedTime = ref("");
         let token = "";
+        let uniqid = "";
+
+        let sectionn = ref([]);
+        let tags = ref([]);
 
         onMounted(() => {
+            const params = getUrlParams();
+            uniqid = params.uniqid || "";
+
             init();
         });
 
         const init = () => {
-            ajaxget(`https://api.gter.net/v2/api/forum/getTopicDetails?uniqid=${"9GPSfyaGDTz5"}`).then((res) => {
-                console.log("res", res);
+            ajaxget(`/v2/api/forum/getTopicDetails?uniqid=${uniqid}`).then((res) => {
                 const data = res.data;
 
-                console.log("data", data);
-
                 let targetInfo = data.info;
 
                 if (!targetInfo.hidden) targetInfo.hidden = 0;
@@ -47,10 +108,9 @@ const appSectionIndex = createApp({
 
                 authorInfo.value = Array.isArray(data.authorInfo) ? null : data.authorInfo;
                 ismyself.value = data.ismyself || false;
-                labelList.value = {
-                    sectionn: targetInfo.sectionn,
-                    tags: targetInfo.tags,
-                };
+
+                sectionn.value = targetInfo.sectionn;
+                tags.value = targetInfo.tags;
 
                 timestamp.value = strtimeago(targetInfo.release_at, 4);
                 updatedTime.value = targetInfo.updated_at ? strtimeago(targetInfo.updated_at, 4) : null;
@@ -58,18 +118,235 @@ const appSectionIndex = createApp({
 
                 token = data.token;
 
-                // if (this.islogin) this.getTopicOperation();
+                getAuthorInfo();
+                getTopicOperation();
+
+                getCoinConfig();
+
+                getRelatedTopics();
+
+                getComment();
             });
         };
 
-        return { signInAlreadyState, authorInfo, info, timestamp, updatedTime, labelList };
+        let count = ref(0);
+        let medal = ref([]);
+        const getAuthorInfo = () => {
+            ajaxget(`/v2/api/forum/getSpaceDetail?uid=${authorInfo.value.uid || 0}&uin=${authorInfo.value.uin || 0}`).then((res) => {
+                const data = res.data;
+                const countList = data.count || [];
+                count.value = countList.reduce((sum, item) => {
+                    const currentCount = Number(item.count) || 0;
+                    return sum + currentCount;
+                }, 0);
+
+                medal.value = data.medal || [];
+                authorInfo.value = data.info;
+                getCreationList(data.token);
+            });
+        };
+
+        let recentlyList = ref([]);
+        const getCreationList = (token) => {
+            ajaxget(`/v2/api/forum/getSpaceTopicList?token=${token}&simple=1`).then((res) => {
+                const data = res.data;
+                recentlyList.value = data.data || [];
+                recentlyList.value = recentlyList.value.slice(0, 8);
+            });
+        };
+
+        let islike = ref(0);
+        let iscollect = ref(0);
+
+        const getTopicOperation = () => {
+            ajax(`/v2/api/forum/getTopicOperation`, {
+                token,
+                actions: ["like", "collection"],
+            }).then((res) => {
+                const data = res.data;
+                const like = data.like;
+                const collection = data.collection;
+
+                islike.value = like.status;
+                iscollect.value = collection.status;
+            });
+        };
+
+        let isLikeGif = ref(false);
+
+        const likeClick = () => {
+            ajax(`/v2/api/forum/postTopicLike`, {
+                token,
+            }).then((res) => {
+                if (res.code != 200) {
+                    creationAlertBox("error", res.message);
+                    return;
+                }
+                const data = res.data;
+                islike.value = data.status;
+                info.value.likes = data.likes;
+
+                if (data.status) {
+                    isLikeGif.value = true;
+                    setTimeout(() => (isLikeGif.value = false), 2000);
+                }
+            });
+        };
+
+        const collectClick = () => {
+            ajax(`/v2/api/forum/postTopicCollect`, {
+                token,
+            }).then((res) => {
+                if (res.code != 200) {
+                    creationAlertBox("error", res.message);
+                    return;
+                }
+                const data = res.data;
+                iscollect.value = data.status;
+                info.value.collections = data.collections;
+            });
+        };
+
+        let strategy = ref("");
+        let mybalance = ref(0);
+        let defaultcoinnum = 0;
+
+        const getCoinConfig = () => {
+            ajaxget(`/v2/api/forum/getCoinConfig`).then((res) => {
+                const data = res.data;
+                strategy.value = data.config.strategy.url || 0;
+                mybalance.value = data.mybalance || 0;
+                defaultcoinnum = data.defaultcoinnum || 0;
+            });
+        };
+
+        let coinsState = ref(false);
+        const openCoinBox = () => {
+            coinsState.value = true;
+            document.body.style.overflow = "hidden";
+            if (!coinListRequest) getCoinRankList();
+        };
+
+        const closeCoinBox = () => {
+            coinsState.value = false;
+            document.body.style.overflow = "auto";
+        };
+
+        let coinAmount = ref("");
+
+        const coinSubmit = () => {
+            const num = Number(coinAmount.value || defaultcoinnum) || 0;
+            ajax(`/v2/api/forum/postTopicCoin`, {
+                token,
+                num,
+            })
+                .then((res) => {
+                    if (res.code == 200) creationAlertBox("success", res.message);
+                    else creationAlertBox("error", res.message);
+
+                    if (res.code != 200) return;
+
+                    let data = res.data;
+
+                    mybalance.value = mybalance.value - num || 0;
+                    coinAmount.value = "";
+                    info.value.coins = data.coins || 0;
+
+                    coinNubmer.value = 0;
+                    coinList.value = [];
+                    getCoinRankList();
+                })
+                .finally(() => {
+                    // wx.hideLoading();
+                });
+        };
+
+        let coinNubmer = ref(0);
+        let coinList = ref([]);
+        let coinListRequest = false; // 控制请求次数
+        const getCoinRankList = () => {
+            ajaxget(`/v2/api/forum/getCoinRankList?token=${token}&limit=1000`).then((res) => {
+                const data = res.data;
+                coinNubmer.value = data.nubmer;
+                coinList.value = data.data;
+                coinListRequest = true;
+            });
+        };
+
+        let relatedList = ref([]);
+        let relatedTime = ref("");
+        const getRelatedTopics = () => {
+            ajaxget(`/v2/api/forum/getRelatedTopics?uniqid=${uniqid}&limit=8`).then((res) => {
+                const data = res.data;
+                relatedTime.value = data.updated_at || "";
+                relatedList.value = data.list || [];
+            });
+        };
+
+        let alreadyCommentIdList = [];
+        let commentPage = ref(1);
+        let isgetCommentSate = false;
+        let commentList = ref([]);
+        let commentTotalCount = ref(0);
+
+        const getComment = () => {
+            if (commentPage.value == 0 || isgetCommentSate) return;
+            isgetCommentSate = true;
+            ajaxget(`/v2/api/forum/getCommentList?token=${token}&page=${commentPage.value}&limit=1500`)
+                .then((res) => {
+                    if (res.code != 200) {
+                        creationAlertBox("error", res.message || "");
+                        return;
+                    }
+                    let data = res.data;
+
+                    data.data.forEach((element, index) => {
+                        element.timestamp = strtimeago(element.created_at, 4);
+
+                        element["isReplyBoxShow"] = 0;
+                        if (element.child.length > 0) {
+                            element.child.forEach((el) => {
+                                el.timestamp = strtimeago(element.created_at, 4);
+                                el["isReplyBoxShow"] = 0;
+                            });
+                        }
+                    });
+
+                    if (commentPage.value > 1) {
+                        for (let index = 0; index < data.data.length; index++) {
+                            if (alreadyCommentIdList.includes(data.data[index].id)) {
+                                data.data.splice(index, 1);
+                                index--;
+                            }
+                        }
+                    }
+
+                    commentList.value = commentList.value.concat(data.data);
+                    commentTotalCount.value = data.count;
+
+                    console.log("commentTotalCount.value", commentTotalCount.value);
+
+                    commentPage.value = data.count > commentList.value.length ? commentPage.value + 1 : 0;
+                })
+                .finally(() => {
+                    isgetCommentSate = false;
+                });
+        };
+
+        let picture = ref({});
+
+        return { permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, signInAlreadyState, authorInfo, info, timestamp, updatedTime };
     },
 });
+
 appSectionIndex.component("itemForum", itemForum);
 appSectionIndex.component("itemOffer", itemOffer);
 appSectionIndex.component("itemSummary", itemSummary);
 appSectionIndex.component("itemVote", itemVote);
 appSectionIndex.component("itemMj", itemMj);
 appSectionIndex.component("itemTenement", itemTenement);
+appSectionIndex.component("latestList", latestList);
+appSectionIndex.component("slideshowBox", slideshowBox);
+appSectionIndex.component("like", like);
 
 appSectionIndex.mount("#details");

js/public.js

@@ -2,8 +2,9 @@ const forumBaseURL = "https://api.gter.net";
 axios.defaults.withCredentials = true;
 
 // 导出ajax函数
-const ajax = (url) => {
-    var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+const ajax = (url, data) => {
+    if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
+
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
     return new Promise(function (resolve, reject) {
         axios
@@ -34,6 +35,8 @@ const ajax = (url) => {
 
 // 导出ajaxget函数
 const ajaxget = (url) => {
+    if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
+
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
     return new Promise(function (resolve, reject) {
         axios
@@ -148,3 +151,167 @@ const timeago = (dateTimeStamp, type = 1) => {
 
     return result;
 };
+
+const creationAlertBox = (type = "success", text) => {
+    if (!text) return;
+    const pathObj = {
+        success: `<path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path>`,
+        error: `<path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"></path>`,
+    };
+
+    const colorObj = {
+        success: {
+            border: "#e1f3d8",
+            color: "#67c23a",
+            background: "#f0f9eb",
+        },
+        error: {
+            border: "#fde2e2",
+            color: "#f56c6c",
+            background: "#fef0f0",
+        },
+    };
+
+    if (!pathObj[type]) type = "success"; // 判断存不存在 给个默认值
+
+    const box = document.createElement("div");
+
+    box.style.position = "fixed";
+    box.style.zIndex = "10003";
+    box.style.top = "-51px";
+    box.style.left = "50%";
+    box.style.border = `${colorObj[type].border} 1px solid`;
+    box.style.color = colorObj[type].color;
+    box.style.background = colorObj[type].background;
+    box.style.display = "flex";
+    box.style.alignItems = "center";
+    box.style.fontSize = "14px";
+    box.style.padding = "15px 19px";
+    box.style.borderRadius = "4px";
+    box.style.transition = "0.5s";
+    box.style.transform = "translateX(-50%)";
+
+    const svg = `<svg style="width: 16px;height: 16px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">${pathObj[type]}</svg>`;
+
+    box.innerHTML = `${svg}${text || "默认提示文本"}`;
+    document.body.appendChild(box);
+
+    setTimeout(() => {
+        box.style.top = 20 + "px";
+        setTimeout(() => {
+            box.style.top = -51 + "px";
+            setTimeout(() => {
+                box.remove();
+            }, 2000);
+        }, 2000);
+    }, 1);
+};
+
+const managerHide = (token, state, type = "offer") => {
+    return new Promise((resolve, reject) => {
+        const obj = {
+            offer: "Offer",
+            offer_summary: "总结",
+            interviewexperience: "面经",
+            thread: "帖子",
+            question: "帖子",
+            vote: "投票",
+        };
+
+        const isConfirmed = confirm(`确定要${state == 0 ? "隐藏" : "显示"}该${obj[type]}吗？`);
+        if (isConfirmed) {
+            ajax(`https://api.gter.net/v2/api/forum/setTopicHide`, {
+                token,
+                hidden: Number(state !== 1),
+            }).then((res) => {
+                const data = res.data;
+                creationAlertBox("success", res.message || "");
+                resolve(data.hidden);
+            });
+        }
+    });
+};
+
+// 推荐
+const managerRecommend = (token, state) => {
+    return new Promise((resolve, reject) => {
+        const post = () => {
+            ajax(`/v2/api/forum/setTopicRecommend`, {
+                token,
+                recommend: state == 1 ? 0 : 1,
+            }).then((res) => {
+                const data = res.data;
+                creationAlertBox("success", res.message || "");
+                resolve(data.recommend);
+            });
+        };
+
+        if (state == 1) {
+            const isConfirmed = confirm(`确定要取消推荐吗？`);
+            if (isConfirmed) post();
+            else resolve(state);
+        } else post();
+    });
+};
+
+// 精华
+const managerEssence = (token, state) => {
+    return new Promise((resolve, reject) => {
+        const post = () => {
+            ajax(`/v2/api/forum/setTopicBest`, {
+                token,
+                best: state == 1 ? 0 : 1,
+            }).then((res) => {
+                const data = res.data;
+                creationAlertBox("success", res.message || "");
+                resolve(data.best);
+            });
+        };
+
+        if (state == 1) {
+            const isConfirmed = confirm(`确定要取消精华吗？`);
+            if (isConfirmed) post();
+            else resolve(state);
+        } else post();
+    });
+};
+
+const getUrlParams = () => {
+    const params = {};
+    const queryString = window.location.search.slice(1);
+    if (queryString) {
+        queryString.split("&").forEach((pair) => {
+            const [key, value] = pair.split("=");
+            params[decodeURIComponent(key)] = decodeURIComponent(value || "");
+        });
+    }
+    return params;
+};
+
+const updateUrlParams = (params, replace = false) => {
+    // 解析当前URL
+    const url = new URL(window.location.href);
+    const searchParams = url.searchParams;
+
+    // 遍历参数对象，更新URL参数
+    Object.entries(params).forEach(([key, value]) => {
+        if (value === null || value === undefined) {
+            // 删除参数
+            searchParams.delete(key);
+        } else {
+            // 添加或修改参数
+            searchParams.set(key, value);
+        }
+    });
+
+    // 生成新的URL（保留协议、域名、路径等，只修改参数）
+    const newUrl = url.origin + url.pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");
+
+    // 修改URL（不刷新页面）
+    if (replace) {
+        history.replaceState(null, "", newUrl);
+    } else {
+        history.pushState(null, "", newUrl);
+    }
+};
+

js/save.js

@@ -19,6 +19,11 @@ const watchList = {
     "../component/item-mj/item-mj.txt": "../component/item-mj/item-mj.js",
     // 监听 item-tenement.txt，同步到 item-tenement.js
     "../component/item-tenement/item-tenement.txt": "../component/item-tenement/item-tenement.js",
+    // 监听 latest-list.txt，同步到 latest-list.js
+    "../component/latest-list/latest-list.txt": "../component/latest-list/latest-list.js",
+    // 监听 slideshow-box.txt，同步到 slideshow-box.js
+    "../component/slideshow-box/slideshow-box.txt": "../component/slideshow-box/slideshow-box.js",
+    
     // 可添加更多文件（格式：'txt路径': 'js路径'）
     // './component/other/other.txt': './component/other/other.js',
 };

js/section-index.js

@@ -1,20 +1,35 @@
-const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
 import { itemForum } from "../component/item-forum/item-forum.js";
 
 const appSectionIndex = createApp({
     setup() {
         let signInAlreadyState = ref(false);
         onMounted(() => {
+            const params = getUrlParams();
+
+            section.value = params.section || "";
+
             getSectionList();
 
             init();
             handpick();
             getTags();
             getList();
+            window.addEventListener("scroll", handleScroll);
         });
 
+        const handleScroll = () => {
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+            const scrollHeight = document.documentElement.scrollHeight;
+            const clientHeight = document.documentElement.clientHeight;
+
+            // 列表下 滑动到底部 获取新数据
+            if (scrollTop + clientHeight >= scrollHeight - 40) getList();
+        };
+
         let sectionList = ref([]);
-        let section = ref("Lz9aimSLXeim");
+        let section = ref("");
 
         const getSectionList = () => {
             ajaxget("/v2/api/forum/getSectionList").then((res) => {
@@ -101,7 +116,6 @@ const appSectionIndex = createApp({
                     count.value = data.count;
                     loading = false;
                     console.log(list.value[0]);
-                    
                 })
                 .catch((err) => {
                     console.log("err", err);
@@ -112,7 +126,68 @@ const appSectionIndex = createApp({
                 });
         };
 
-        return { signInAlreadyState, sectionList, section, info, handpickList, tagsList, list };
+        onMounted(() => getUserInfoWin());
+
+        let isLogin = ref(true);
+        let realname = ref(1); // 是否已经实名
+        let userInfoWin = ref({});
+
+        const getUserInfoWin = () => {
+            const checkUser = () => {
+                const user = window.userInfoWin;
+                if (!user) return;
+                document.removeEventListener("getUser", checkUser);
+                realname.value = user.realname;
+                userInfoWin.value = user;
+                if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
+            };
+            document.addEventListener("getUser", checkUser);
+        };
+
+        const openAttest = () => {
+            const handleAttestClose = () => {
+                document.removeEventListener("closeAttest", handleAttestClose);
+                realname.value = window.userInfoWin?.realname || 0;
+            };
+            // 启动认证流程时添加监听
+            document.addEventListener("closeAttest", handleAttestClose);
+            loadAttest(2);
+        };
+
+        // 跳转登录
+        const goLogin = () => {
+            if (typeof window === "undefined") return;
+            if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
+                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                else ajax_login();
+            } else ajax_login();
+        };
+
+        provide("isLogin", isLogin);
+        provide("userInfoWin", userInfoWin);
+        provide("realname", realname);
+        provide("openAttest", openAttest);
+        provide("goLogin", goLogin);
+
+        const changeSection = (uniqid) => {
+            section.value = uniqid;
+            handpickList.value = [];
+            info.value = {};
+            tagsList.value = [];
+
+            count.value = 0;
+            page.value = 1;
+            list.value = [];
+
+            init();
+            handpick();
+            getTags();
+            getList();
+
+            updateUrlParams({ section: uniqid });
+        };
+
+        return { changeSection, signInAlreadyState, sectionList, section, info, handpickList, tagsList, list, count };
     },
 });
 appSectionIndex.component("item-forum", itemForum);