no message

css/details.css

@@ -1108,7 +1108,7 @@
   top: 0;
   left: 0;
   background-color: rgba(255, 255, 255, 0.8);
-  z-index: 100;
+  z-index: 10002;
 }
 .detail-image-mask .detail-image {
   width: 80vw;

css/details.less

@@ -1295,7 +1295,7 @@
     top: 0;
     left: 0;
     background-color: rgba(255, 255, 255, 0.8);
-    z-index: 100;
+    z-index: 10002;
 }
 
 .detail-image-mask .detail-image {

css/edit.css

@@ -121,6 +121,7 @@
 #edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box {
   display: flex;
 }
+#edit .edit-container .editor-toolbar .toolbar-item .link-box-mask,
 #edit .edit-container .editor-toolbar .toolbar-item .emoji-box-mask {
   position: fixed;
   top: 0;
@@ -131,6 +132,9 @@
   background-color: rgba(0, 0, 0, 0.20392157);
   display: none;
 }
+#edit .edit-container .editor-toolbar .toolbar-item .link-box-mask {
+  background: transparent;
+}
 #edit .edit-container .editor-toolbar .toolbar-item .emoji-box {
   width: 582px;
   border-radius: 8px;
@@ -163,6 +167,65 @@
   margin: 5px;
   cursor: pointer;
 }
+#edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box-mask {
+  display: block;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box {
+  display: flex;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link .link-box {
+  background-color: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
+  width: 336px;
+  height: 282px;
+  position: absolute;
+  top: 30px;
+  left: 0%;
+  z-index: 1;
+  border: 1px solid #ebebeb;
+  display: none;
+  flex-direction: column;
+  padding: 18px 20px 0;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item {
+  margin-bottom: 22px;
+  flex-direction: column;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .name {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #555555;
+  line-height: 26px;
+  margin-bottom: 8px;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .input {
+  height: 36px;
+  border: 1px solid #d7d7d7;
+  border-radius: 7px;
+  padding: 0 10px;
+  font-size: 14px;
+  color: #000000;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn {
+  width: 72px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #50e3c2;
+  border-radius: 8px;
+  margin-left: auto;
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 16px;
+  color: #000000;
+  margin-top: 8px;
+}
+#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn:hover {
+  background-color: #c2eff6;
+}
 #edit .edit-container .content-input {
   min-height: 509px;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
@@ -204,6 +267,12 @@
   width: 100%;
   height: 26px;
 }
+#edit .edit-container .content-input a {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-size: 15px;
+  text-decoration: underline;
+  color: #04b0d5;
+}
 #edit .edit-container .tags-list {
   padding: 0 36px;
   margin-bottom: 10px;

css/edit.less

@@ -135,6 +135,7 @@
                     }
                 }
 
+                .link-box-mask,
                 .emoji-box-mask {
                     position: fixed;
                     top: 0;
@@ -146,6 +147,10 @@
                     display: none;
                 }
 
+                .link-box-mask {
+                    background: transparent;
+                }
+
                 .emoji-box {
                     width: 582px;
                     border-radius: 8px;
@@ -180,6 +185,77 @@
                         cursor: pointer;
                     }
                 }
+
+                &.link {
+                    &.pitch {
+                        .link-box-mask {
+                            display: block;
+                        }
+
+                        .link-box {
+                            display: flex;
+                        }
+                    }
+
+                    .link-box {
+                        background-color: rgba(255, 255, 255, 1);
+                        border-radius: 6px;
+                        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
+
+                        width: 336px;
+                        height: 282px;
+                        position: absolute;
+                        top: 30px;
+                        left: 0%;
+                        z-index: 1;
+
+                        border: 1px solid #ebebeb;
+                        display: none;
+                        flex-direction: column;
+                        padding: 18px 20px 0;
+
+                        .item {
+                            margin-bottom: 22px;
+                            flex-direction: column;
+                            .name {
+                                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                                font-weight: 400;
+                                font-style: normal;
+                                font-size: 14px;
+                                color: #555555;
+                                line-height: 26px;
+                                margin-bottom: 8px;
+                            }
+
+                            .input {
+                                height: 36px;
+                                border: 1px solid rgba(215, 215, 215, 1);
+                                border-radius: 7px;
+                                padding: 0 10px;
+                                font-size: 14px;
+                                color: #000000;
+                            }
+                        }
+
+                        .btn {
+                            width: 72px;
+                            height: 40px;
+                            line-height: 40px;
+                            background-color: rgba(80, 227, 194, 1);
+                            border-radius: 8px;
+                            margin-left: auto;
+                            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                            font-weight: 650;
+                            font-style: normal;
+                            font-size: 16px;
+                            color: #000000;
+                            margin-top: 8px;
+                            &:hover {
+                                background-color: rgba(194, 239, 246, 1);
+                            }
+                        }
+                    }
+                }
             }
         }
 
@@ -229,6 +305,13 @@
                 width: 100%;
                 height: 26px;
             }
+
+            a {
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-size: 15px;
+                text-decoration: underline;
+                color: #04b0d5;
+            }
         }
 
         .tags-list {

css/public.css

@@ -642,7 +642,7 @@ body {
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
-  border-top: 8px solid #000000;
+  border-top: 8px solid #ffffff;
   position: absolute;
   bottom: -8px;
   left: 50%;

css/public.less

@@ -769,7 +769,7 @@ body {
                     height: 0;
                     border-left: 8px solid transparent;
                     border-right: 8px solid transparent;
-                    border-top: 8px solid #000000;
+                    border-top: 8px solid #ffffff;
                     position: absolute;
                     bottom: -8px;
                     left: 50%;

edit.html

@@ -51,6 +51,22 @@
                             <div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
                         </div>
                     </div>
+                    <div class="toolbar-item flexacenter link" :class="{'pitch': linkState}" @click="openLink">
+                        <img class="icon" src="./img/link-icon.png" alt="表情" />
+                        <span>链接</span>
+                        <div class="link-box-mask" @click.stop="closeLink"></div>
+                        <div class="link-box flexflex">
+                            <div class="item flexflex">
+                                <div class="name">请输入链接地址：</div>
+                                <input class="input" type="text" v-model="linkUrl" />
+                            </div>
+                            <div class="item flexflex">
+                                <div class="name">请输入链接文字：</div>
+                                <input class="input" type="text" v-model="linkText" />
+                            </div>
+                            <div class="btn flexcenter" @click.stop="insertLink">OK</div>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- 内容编辑区 -->

js/edit.js

@@ -63,7 +63,7 @@ const editApp = createApp({
         let uConfigData = {};
 
         const cUpload = () => {
-            ajaxget(`/v2/api/config/upload?type=topic`).then((res) => {
+            ajaxGet(`/v2/api/config/upload?type=topic`).then((res) => {
                 const data = res.data;
                 uConfigData = data;
             });
@@ -487,7 +487,49 @@ const editApp = createApp({
             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 };
+        let linkUrl = ref("");
+        let linkText = ref("");
+
+        let linkState = ref(false);
+        const openLink = () => {
+            console.log("打开链接");
+            linkState.value = true;
+        };
+
+        const closeLink = () => {
+            console.log("关闭链接");
+            linkState.value = false;
+            linkText.value = "";
+            linkUrl.value = "";
+            
+        };
+
+        const insertLink = () => {
+            if (linkText.value == "" || linkUrl.value == "") {
+                creationAlertBox("error", "请输入链接文字和链接地址");
+                return;
+            }
+            const a = document.createElement("a");
+            a.href = linkUrl.value;
+            a.target = "_blank";
+            a.textContent = linkText.value;
+            lastSelection.insertNode(a);
+
+            // 移动光标到元素后面并确保光标位置被正确设置和获取
+            const newRange = document.createRange();
+            newRange.setStartAfter(a);
+            newRange.setEndAfter(a);
+
+            // 更新选择范围
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            lastSelection = newRange;
+
+            closeLink();
+        };
+
+        return { insertLink, linkUrl, linkText, linkState, openLink, closeLink, userInfoWin, titleLength, submit, insertLabel, emojiState, openEmoji, closeEmoji, selectEmoji, optionEmoji, isPTitle, onEditorInput, onEditorFocus, onEditorBlur, paragraphTitle, info, tagList, token, cutAnonymity, editorRef, insertImage, judgeIsEmpty, isEmpty };
     },
 });
 

simple_scroll.html

@@ -1,92 +1,130 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
     <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>滚动触底固定效果</title>
         <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
+            * {
-        body { min-height: 200vh; background: #f8f9fa; }
+                margin: 0;
-        .container { display: flex; width: 1000px; margin: 20px auto; gap: 20px; }
+                padding: 0;
-        .left, .right { padding: 20px; border-radius: 8px; }
+                box-sizing: border-box;
-        .left { width: 300px; background: #f0f8fb; }
+            }
-        .right { width: 680px; background: #fef7fb; }
+            body {
-        .fixed { position: fixed; bottom: 20px; max-height: calc(100vh - 40px); overflow: hidden; z-index: 10; }
+                min-height: 200vh;
+                background: #f8f9fa;
+            }
+            .container {
+                display: flex;
+                width: 1200px;
+                margin: 20px auto;
+                gap: 20px;
+            }
+            .left {
+                width: 200px;
+                height: 1000px;
+                background-color: aqua;
+            }
+            .right {
+                flex: 1;
+                height: 1500px;
+                background-color: #ff0090;
+            }
+
+            .bottom {
+                width: 1200px;
+                height: 200px;
+                margin: 20px auto;
+                background-color: #0090ff;
+            }
         </style>
     </head>
     <body>
         <div class="container">
-        <div class="left" id="left">
+            <div class="left" id="left"></div>
-            <h3>左侧短内容</h3>
+            <div class="right" id="right"></div>
-            <p>这里是左侧内容，相对较短。</p>
-            <p>当页面滚动时，左侧会先触底。</p>
-            <p>触底后会固定在底部。</p>
-            <p>右侧内容可以继续滚动。</p>
-        </div>
-        <div class="right" id="right">
-            <h3>右侧长内容</h3>
-            <p>右侧内容第1行</p>
-            <p>右侧内容第2行</p>
-            <p>右侧内容第3行</p>
-            <p>右侧内容第4行</p>
-            <p>右侧内容第5行</p>
-            <p>右侧内容第6行</p>
-            <p>右侧内容第7行</p>
-            <p>右侧内容第8行</p>
-            <p>右侧内容第9行</p>
-            <p>右侧内容第10行</p>
-            <p>右侧内容第11行</p>
-            <p>右侧内容第12行</p>
-            <p>右侧内容第13行</p>
-            <p>右侧内容第14行</p>
-            <p>右侧内容第15行</p>
-        </div>
         </div>
+        <div class="bottom" id="bottom"></div>
         <script>
-        // 极其简化的滚动固定实现
+            // 获取DOM元素
-        window.onload = function() {
             const left = document.getElementById('left');
             const right = document.getElementById('right');
+            const bottom = document.getElementById('bottom');
             const container = document.querySelector('.container');
-            const containerLeft = container.getBoundingClientRect().left;
-            const containerRight = window.innerWidth - (containerLeft + container.offsetWidth);
             
-            let leftFixed = false;
+            // 存储初始位置信息
-            let rightFixed = false;
+            let containerLeft = 0;
-            let scrollTimeout;
+            let leftWidth = 0;
+            let rightWidth = 0;
+            let gap = 20; // 与CSS中的gap一致
             
-            // 节流滚动处理
+            // 初始化函数
-            window.onscroll = function() {
+            function init() {
-                if (scrollTimeout) clearTimeout(scrollTimeout);
+                const containerRect = container.getBoundingClientRect();
-                scrollTimeout = setTimeout(function() {
+                containerLeft = containerRect.left;
+                leftWidth = left.offsetWidth;
+                rightWidth = right.offsetWidth;
+            }
+            
+            // 滚动时检查并固定元素
+            window.addEventListener('scroll', function() {
+                const scrollY = window.scrollY;
                 const windowHeight = window.innerHeight;
-                    const leftRect = left.getBoundingClientRect();
-                    const rightRect = right.getBoundingClientRect();
                 
-                    // 左侧固定逻辑
+                // 获取底部元素的顶部位置（相对于文档）
-                    if (!leftFixed && leftRect.bottom <= windowHeight && leftRect.top <= 0) {
+                const bottomTop = bottom.getBoundingClientRect().top + scrollY;
-                        left.classList.add('fixed');
+                
+                // 获取左右元素的底部位置（相对于文档）
+                const leftBottom = left.getBoundingClientRect().bottom + scrollY;
+                const rightBottom = right.getBoundingClientRect().bottom + scrollY;
+                
+                // 检查左侧元素是否需要固定
+                if (leftBottom >= bottomTop && left.style.position !== 'fixed') {
+                    // 固定左侧元素
+                    left.style.position = 'fixed';
+                    left.style.bottom = '0';
                     left.style.left = containerLeft + 'px';
-                        leftFixed = true;
+                    left.style.width = leftWidth + 'px';
-                    } else if (leftFixed && leftRect.top > 0) {
+                } else if (scrollY < bottomTop - windowHeight && left.style.position === 'fixed') {
-                        left.classList.remove('fixed');
+                    // 恢复左侧元素
+                    left.style.position = '';
+                    left.style.bottom = '';
                     left.style.left = '';
-                        leftFixed = false;
+                    left.style.width = '';
                 }
                 
-                    // 右侧固定逻辑
+                // 检查右侧元素是否需要固定
-                    if (!rightFixed && rightRect.bottom <= windowHeight && rightRect.top <= 0) {
+                if (rightBottom >= bottomTop && right.style.position !== 'fixed') {
-                        right.classList.add('fixed');
+                    // 固定右侧元素
-                        right.style.right = containerRight + 'px';
+                    right.style.position = 'fixed';
-                        rightFixed = true;
+                    right.style.bottom = '0';
-                    } else if (rightFixed && rightRect.top > 0) {
+                    right.style.left = (containerLeft + leftWidth + gap) + 'px';
-                        right.classList.remove('fixed');
+                    right.style.width = rightWidth + 'px';
-                        right.style.right = '';
+                } else if (scrollY < bottomTop - windowHeight && right.style.position === 'fixed') {
-                        rightFixed = false;
+                    // 恢复右侧元素
+                    right.style.position = '';
+                    right.style.bottom = '';
+                    right.style.left = '';
+                    right.style.width = '';
                 }
-                }, 30);
+            });
-            };
+            
-        };
+            // 窗口大小改变时重新计算位置
+            window.addEventListener('resize', function() {
+                init();
+                
+                // 如果元素已固定，更新它们的位置
+                if (left.style.position === 'fixed') {
+                    left.style.left = containerLeft + 'px';
+                }
+                
+                if (right.style.position === 'fixed') {
+                    right.style.left = (containerLeft + leftWidth + gap) + 'px';
+                }
+            });
+            
+            // 初始化
+            init();
         </script>
     </body>
 </html>