feat: 新增编辑页面和分享功能，优化链接跳转和样式

- 添加edit.html编辑页面及相关CSS样式
- 实现内容编辑区的富文本功能
- 为item-bottom组件添加分享功能，包括复制链接和微信转发
- 更新多个组件的链接跳转地址
- 优化CSS样式，包括圆角、阴影和hover效果
- 修复部分样式问题和布局错位
- 移除不再使用的section-index.html文件

js/edit.js

@@ -0,0 +1,495 @@
+// 简单版本的论坛编辑器，确保图片插入功能正常
+const { createApp, ref, computed, onMounted, nextTick } = Vue;
+import { headTop } from "../component/head-top/head-top.js";
+
+const editApp = createApp({
+    setup() {
+        let titleLength = ref(200);
+
+        onMounted(() => {
+            getUserInfoWin();
+
+            cUpload();
+            init();
+        });
+
+        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,
+        });
+
+        let permissions = 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;
+                permissions.value = user?.authority || [];
+            };
+            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"]) isLogin.value = true;
+                else ajax_login();
+            } else ajax_login();
+        };
+
+        let uConfigData = {};
+
+        const cUpload = () => {
+            ajaxget(`/v2/api/config/upload?type=topic`).then((res) => {
+                const data = res.data;
+                uConfigData = data;
+            });
+        };
+
+        let info = ref({});
+        let tagList = ref([]);
+        let token = ref("");
+        let infoImages = [];
+        const init = () => {
+            ajax("/v2/api/forum/postPublishInit")
+                .then((res) => {
+                    const data = res.data;
+                    if (res.code != 200) {
+                        creationAlertBox(res.message || "操作失败");
+                        return;
+                    }
+
+                    const infoTarget = data.info || {};
+
+                    infoImages = infoTarget.attachments?.images || [];
+
+                    if (infoTarget.content) infoTarget.content = restoreHtml(infoTarget.content, infoImages);
+
+                    info.value = infoTarget;
+                    tagList.value = data.tagList;
+                    token.value = data.token;
+
+                    nextTick(() => {
+                        judgeIsEmpty();
+                    });
+                })
+                .catch((err) => {
+                    console.log("err", err);
+                });
+        };
+
+        const restoreHtml = (formattedText, imageList) => {
+            let html = formattedText;
+
+            // 1. 还原换行符为<br>标签
+            html = html.replace(/\n/g, "<br>");
+
+            // 2. 还原块级标签的换行标记
+            html = html.replace(/<br><div>/g, "<div>");
+            html = html.replace(/<\/div><br>/g, "</div>");
+
+            // 3. 还原标签标记为span.blue
+            html = html.replace(/\[tag\]([^[]+)\[\/tag\]/gi, '<span class="blue">#$1</span> <span class="fill"></span> ');
+
+            // 4. 还原粗体标记为h2标签
+            html = html.replace(/\[b\]([^[]+)\[\/b\]/gi, "<h2>$1</h2>");
+
+            // 5. 还原图片标记为img标签（使用提供的imageList）
+            html = html.replace(/\[attachimg\](\d+)\[\/attachimg\]/gi, (match, aid) => {
+                // 查找对应的图片信息
+                const image = imageList.find((img) => img.aid == aid);
+                if (image) {
+                    return `<img src="${image.url}" data-aid="${aid}">`;
+                }
+                return match; // 未找到对应图片时保留原始标记
+            });
+
+            // 6. 还原填充标签
+            html = html.replace(/(<span class="blue">[^<]+<\/span>)\s+/gi, '$1 <span class="fill"></span> ');
+
+            // 7. 清理多余的<br>标签
+            html = html.replace(/<br><br>/g, "<br>");
+
+            return html;
+        };
+
+        onMounted(() => {
+            setTimeout(() => focusLastNode(), 1000);
+        });
+
+        const editorRef = ref(null);
+
+        const focusLastNode = () => {
+            const newRange = document.createRange();
+            const textNode = document.createTextNode("");
+            editorRef.value.appendChild(textNode);
+            newRange.setStartAfter(textNode, 0);
+            newRange.setEndAfter(textNode, 0);
+            lastSelection = newRange;
+        };
+
+        let lastSelection = null;
+
+        let loading = ref(false);
+
+        const maxSize = 20 * 1024 * 1024; // 20MB
+
+        const insertImage = (event) => {
+            let config = uConfigData;
+            const target = event.target.files[0];
+            if (!target) return; // 处理未选择文件的情况
+
+            if (target.size > maxSize) {
+                creationAlertBox("文件大小不能超过 20MB");
+                return;
+            }
+
+            loading.value = true;
+
+            // 不要删除，后面会用
+            const formData = new FormData();
+            formData.append(config.requestName, target); // 文件数据
+            formData.append("name", target.name); // 文件名
+            formData.append("type", "image"); // 文件名
+            formData.append("data", config.params.data); // 文件名
+
+            ajax(config.url, formData)
+                .then((res) => {
+                    const data = res.data;
+                    try {
+                        const range = lastSelection;
+                        const img = document.createElement("img");
+
+                        img.src = data.url;
+                        img.setAttribute("data-aid", data.aid);
+                        range.insertNode(img);
+                        const div = document.createElement("div");
+                        range.insertNode(div);
+                        judgeIsEmpty();
+                    } catch (error) {
+                        console.error("插入图片出错:", error);
+                    }
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        };
+
+        let isEmpty = ref(true);
+
+        const onEditorInput = (event) => {
+            const selection = window.getSelection();
+
+            if (selection.rangeCount > 0) {
+                lastSelection = selection.getRangeAt(0);
+                // console.log("更新选区");
+                updatePTitleStatus();
+            }
+
+            judgeIsEmpty();
+
+            debouncedGetTagList();
+        };
+
+        // 防抖函数
+        const debounce = (fn, delay = 500) => {
+            let timer = null;
+            return function () {
+                if (timer) {
+                    clearTimeout(timer);
+                }
+                timer = setTimeout(() => {
+                    fn.apply(this, arguments);
+                    timer = null;
+                }, delay);
+            };
+        };
+
+        const getRandomChinese = () => {
+            // 中文 Unicode 范围：\u4e00 - \u9fa5（共约 2 万个汉字）
+            const start = 0x4e00; // 起始编码
+            const end = 0x9fa5; // 结束编码
+            // 生成范围内的随机整数，转为字符
+            return String.fromCodePoint(Math.floor(Math.random() * (end - start + 1) + start));
+        };
+
+        const generateRandomString = (length = 5) => {
+            // 定义字符集：包含大小写字母和数字
+            const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+            let result = "";
+            // 循环生成指定长度的随机字符
+            for (let i = 0; i < length; i++) {
+                // 从字符集中随机取一个字符
+                const randomIndex = Math.floor(Math.random() * chars.length);
+                result += chars[randomIndex];
+            }
+            return result;
+        };
+
+        const getTagList = () => {
+            const content = editorRef.value.innerText;
+            axios
+                .post("https://api.gter.net/v2/api/forum/postPublishTags", {
+                    content,
+                })
+                .then((res) => {
+                    res = res.data;
+                    if (res.code != 200) return;
+                    let data = res.data || [];
+
+                    // 随机生成一下数据
+                    for (let i = 0; i < 5; i++) {
+                        data.push({
+                            title: getRandomChinese() + getRandomChinese(),
+                            tagId: generateRandomString(),
+                        });
+                    }
+
+                    tagList.value = data;
+                });
+        };
+
+        const debouncedGetTagList = debounce(getTagList, 500);
+
+        let isBottomState = ref(false); // 底部按钮 显示
+        const onEditorFocus = () => {
+            isBottomState.value = true;
+        };
+
+        const onEditorBlur = () => {
+            isBottomState.value = false;
+        };
+
+        // 判断是否为空
+        const judgeIsEmpty = () => {
+            const text = editorRef.value.innerText;
+            isEmpty.value = text.length == 0 && !editorRef.value.querySelector("img");
+        };
+
+        const isPTitle = ref(false);
+
+        const paragraphTitle = () => {
+            editorRef.value.focus();
+            if (!lastSelection) return;
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(lastSelection);
+
+            // 使用try-catch确保即使命令执行失败也能恢复滚动位置
+            try {
+                document.execCommand("formatBlock", false, isPTitle.value ? "P" : "H2");
+            } catch (error) {
+                console.error("应用段落格式失败:", error);
+            }
+
+            // 更新状态
+            setTimeout(() => updatePTitleStatus(), 100);
+        };
+
+        const updatePTitleStatus = () => {
+            if (lastSelection) {
+                let parentElement = lastSelection.commonAncestorContainer;
+                // 死循环，直到遇到终止条件
+                while (true) {
+                    // 如果没有父元素了（到达文档根节点），退出循环返回false
+                    if (!parentElement) {
+                        isPTitle.value = false;
+                        return;
+                    }
+
+                    // 遇到id为"editor"的元素，返回false
+                    if (parentElement.id === "editor") {
+                        isPTitle.value = false;
+                        return;
+                    }
+
+                    // 遇到nodeName为"H2"的元素，返回true（注意nodeName是大写的）
+                    if (parentElement.nodeName === "H2") {
+                        isPTitle.value = true;
+                        return;
+                    }
+
+                    // 继续向上查找父元素
+                    parentElement = parentElement.parentElement;
+                }
+            }
+        };
+
+        const cutAnonymity = () => (info.value.anonymous = info.value.anonymous ? 0 : 1);
+
+        const insertLabel = (id) => {
+            const index = tagList.value.findIndex((item) => item.tagId == id);
+            if (index == -1) return;
+            const label = tagList.value[index].title;
+
+            const span = document.createElement("span");
+            span.innerHTML = `<span class="blue">#${label}</span> <span class="fill"></span> `;
+            lastSelection.insertNode(span);
+
+            // 移动光标到元素后面并确保光标位置被正确设置和获取
+            const newRange = document.createRange();
+            newRange.setStartAfter(span);
+            newRange.setEndAfter(span);
+
+            // 更新选择范围
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            lastSelection = newRange;
+
+            // 手动触发selectionchange事件，确保其他组件知道光标位置变化
+            const selectionChangeEvent = new Event("selectionchange", { bubbles: true });
+            document.dispatchEvent(selectionChangeEvent);
+
+            judgeIsEmpty();
+
+            // 删除 tagList 中当前标签
+            tagList.value.splice(index, 1);
+        };
+
+        let emojiState = ref(false);
+
+        const optionEmoji = ref(["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😘", "🤥", "😪", "😵‍💫", "🤓", "🥺", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❎️", "✳️", "✴️", "❇️", "#️⃣", "*️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🆗", "🈶", "🉐", "🉑", "🌹", "🥀", "🌸", "🌺", "🌷", "🌲", "☘️", "🍀", "🍁", "🌙", "⭐", "🌍", "☀️", "⭐️", "🌟", "☁️", "🌈", "☂️", "❄️", "☃️", "☄️", "🔥", "💧", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹", "🍒", "🥝", "🥒", "🥦", "🥨", "🌭", "🥘", "🍱", "🍢", "🥮", "🍩", "🍪", "🧁", "🍵", "🍶", "🍻", "🥂", "🧋", "🎉", "🎁", "🧧", "🎃", "🎄", "🧨", "✨️", "🎈", "🎊", "🎋", "🎍", "🎀", "🎖️", "🏆️", "🏅", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🔮", "🧸", "🀄️"]);
+
+        const openEmoji = () => (emojiState.value = true);
+
+        const closeEmoji = () => (emojiState.value = false);
+
+        const selectEmoji = (emoji) => {
+            const textNode = document.createTextNode(emoji);
+            lastSelection.insertNode(textNode);
+
+            // 移动光标到emoji后面并确保光标位置被正确设置和获取
+            const newRange = document.createRange();
+            newRange.setStartAfter(textNode);
+            newRange.setEndAfter(textNode);
+
+            // 更新选择范围
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            lastSelection = newRange;
+
+            // 手动触发selectionchange事件，确保其他组件知道光标位置变化
+            const selectionChangeEvent = new Event("selectionchange", { bubbles: true });
+            document.dispatchEvent(selectionChangeEvent);
+            closeEmoji();
+            judgeIsEmpty();
+        };
+
+        let format = ref("");
+        const submit = (status) => {
+            const infoTarget = { ...info.value } || {};
+            let content = editorRef.value.innerHTML;
+
+            const images = extractImages(content);
+
+            infoTarget.attachments.images = images;
+
+            info.value["attachments"]["images"] = images;
+            console.log("转换前：", content);
+            content = formatContent(content);
+            console.log("转换后：", content);
+            const data = {
+                ...infoTarget,
+                content,
+            };
+
+            ajax("/v2/api/forum/postPublishTopic", {
+                info: data,
+                token: token.value,
+                status,
+            }).then((res) => {
+                const data = res.data;
+                if (res.code != 200) {
+                    creationAlertBox("error", res.message);
+                    return;
+                }
+
+                creationAlertBox("success", res.message || "操作成功");
+                const back = () => {
+                    if (status == 1) redirectToExternalWebsite("./details.html?uniqid=" + data.uniqid);
+                    else redirectToExternalWebsite("./index.html");
+                };
+
+                setTimeout(() => back(), 1500);
+            });
+        };
+
+        const formatContent = (html) => {
+            // 1. 替换图片标签
+            html = html.replace(/<img[^>]*data-aid="(\d+)"[^>]*>/gi, "[attachimg]$1[/attachimg]");
+
+            // 2. 替换H2标签
+            html = html.replace(/<h2[^>]*>([\s\S]*?)<\/h2>/gi, "[b]$1[/b]");
+
+            // 3. 替换标签（保留与前后内容的连续性）
+            html = html.replace(/<span\s+class="blue">#([^<]+)<\/span>/gi, "[tag]$1[/tag]");
+
+            // 4. 移除无关标签（如空的<span class="fill"></span>）
+            html = html.replace(/<span\s+class="fill">[^<]*<\/span>/gi, "");
+
+            // 5. 处理块级标签换行（仅<div>等块级标签前后换行，保持行内内容连续）
+            // 块级标签：div、p、h1-h6等，这里以div为例
+            html = html.replace(/<\/div>\s*/gi, "</div>\n"); // 闭合div后换行
+            html = html.replace(/\s*<div[^>]*>/gi, "\n<div>"); // 开启div前换行
+
+            // 6. 处理<br>为换行
+            html = html.replace(/<br\s*\/?>/gi, "\n");
+
+            // 7. 移除所有剩余HTML标签
+            html = html.replace(/<[^>]+>/gi, "");
+
+            // 8. 清理连续换行（最多保留两个空行，避免过多空行）
+            html = html.replace(/\n{3,}/g, "\n\n");
+            // 去除首尾空白
+            html = html.trim();
+
+            return html;
+        };
+
+        const extractImages = (html) => {
+            const images = [];
+            // 正则匹配 img 标签，提取 src（url）和 data-aid
+            const imgRegex = /<img[^>]*src="([^"]+)"[^>]*data-aid="(\d+)"[^>]*>/gi;
+            let match;
+
+            // 循环匹配所有图片标签
+            while ((match = imgRegex.exec(html)) !== null) {
+                images.push({
+                    url: match[1], // 图片的 src 地址
+                    aid: Number(match[2]), // 图片的 data-aid 属性值
+                });
+            }
+
+            return images;
+        };
+
+        return { userInfoWin, titleLength, submit, insertLabel, emojiState, openEmoji, closeEmoji, selectEmoji, optionEmoji, isPTitle, onEditorInput, onEditorFocus, onEditorBlur, paragraphTitle, info, tagList, token, cutAnonymity, editorRef, insertImage, judgeIsEmpty, isEmpty };
+    },
+});
+
+editApp.component("headTop", headTop);
+editApp.mount("#edit");

js/index.js

@@ -1,6 +1,7 @@
 const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
 import { headTop } from "../component/head-top/head-top.js";
 import { itemForum } from "../component/item-forum/item-forum.js";
+import { latestList } from "../component/latest-list/latest-list.js";
 
 const appIndex = createApp({
     setup() {
@@ -220,18 +221,22 @@ const appIndex = createApp({
             {
                 title: "26FALL",
                 subtitle: "申请群",
+                img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~",
             },
             {
                 title: "申请求助",
                 subtitle: "寄托院校君",
+                img: "https://u.gter.net/assistantwxqrcode.png",
             },
             {
                 title: "香港租房",
                 subtitle: "交流群",
+                img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~",
             },
             {
                 title: "香港租房顾问",
                 subtitle: "寄托方同学",
+                img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~",
             },
         ];
 
@@ -290,5 +295,6 @@ const appIndex = createApp({
 
 appIndex.component("headTop", headTop);
 appIndex.component("itemForum", itemForum);
+appIndex.component("latestList", latestList);
 
 appIndex.mount("#appIndex");

js/public.js

@@ -3,7 +3,7 @@ axios.defaults.withCredentials = true;
 
 // 导出ajax函数
 const ajax = (url, data) => {
-    if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
+    if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "erhvky91rk23vx7xiutj34db82kjb1vc";
 
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
     return new Promise(function (resolve, reject) {
@@ -25,7 +25,7 @@ const ajax = (url, data) => {
                 resolve(data);
             })
             .catch((err) => {
-                reject();
+                reject();                
                 if (err.response?.status == 401)
                     showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
                         cover: true,
@@ -36,7 +36,7 @@ const ajax = (url, data) => {
 
 // 导出ajaxget函数
 const ajaxget = (url) => {
-    if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
+    if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "erhvky91rk23vx7xiutj34db82kjb1vc";
 
     url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
     return new Promise(function (resolve, reject) {

js/section.js

@@ -1,5 +1,6 @@
 const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
 import { itemForum } from "../component/item-forum/item-forum.js";
+import { latestList } from "../component/latest-list/latest-list.js";
 
 const appSectionIndex = createApp({
     setup() {
@@ -18,6 +19,8 @@ const appSectionIndex = createApp({
             handpick();
             getTags();
             getList();
+            getTopicLatest();
+
             window.addEventListener("scroll", handleScroll);
         });
 
@@ -195,10 +198,36 @@ const appSectionIndex = createApp({
             getList();
 
             updateUrlParams({ section: uniqid });
+
         };
 
-        return { changeSection, sectionList, section, info, handpickList, tagsList, list, count };
+        let offer = ref([]); // 面经列表
+        let vote = ref([]); // 面经列表
+        let interviewexperience = ref([]); // 面经列表
+        const getTopicLatest = () => {
+            ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
+                const data = res.data || [];
+                console.log("data99999999999999", data);
+
+                data.vote.forEach((item) => {
+                    if (!item.title) {
+                        item.title = item.content;
+                        item.content = "";
+                    }
+                });
+
+                console.log("data", data);
+                offer.value = data.offer;
+                vote.value = data.vote;
+                interviewexperience.value = data.interviewexperience;
+
+                console.log("interviewexperience", interviewexperience.value);
+            });
+        };
+
+        return { offer, vote, interviewexperience, changeSection, sectionList, section, info, handpickList, tagsList, list, count };
     },
 });
 appSectionIndex.component("item-forum", itemForum);
+appSectionIndex.component("latest-list", latestList);
 appSectionIndex.mount("#sectionIndex");