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");