feat: 优化页面布局和交互体验

- 使用sticky定位替代fixed定位，提升滚动体验
- 添加视频播放图标和图片展示功能
- 实现搜索框热门关键词轮播效果
- 优化编辑器链接插入功能
- 调整组件样式和布局细节

js/edit.js

@@ -1,5 +1,5 @@
 // 简单版本的论坛编辑器，确保图片插入功能正常
-const { createApp, ref, computed, onMounted, nextTick } = Vue;
+const { createApp, ref, computed, onMounted, nextTick, onUnmounted } = Vue;
 import { headTop } from "../component/head-top/head-top.js";
 
 const editApp = createApp({
@@ -11,6 +11,14 @@ const editApp = createApp({
 
             cUpload();
             init();
+
+            // 添加selectionchange事件监听，当鼠标选中区域内容时更新lastSelection
+            document.addEventListener("selectionchange", handleSelectionChange);
+        });
+
+        // 组件卸载时移除事件监听
+        onUnmounted(() => {
+            document.removeEventListener("selectionchange", handleSelectionChange);
         });
 
         let isLogin = ref(true);
@@ -201,6 +209,8 @@ const editApp = createApp({
         let isEmpty = ref(true);
 
         const onEditorInput = (event) => {
+            console.log("onEditorInput");
+
             const selection = window.getSelection();
 
             if (selection.rangeCount > 0) {
@@ -289,6 +299,22 @@ const editApp = createApp({
             isEmpty.value = text.length == 0 && !editorRef.value.querySelector("img");
         };
 
+        // 处理选中文本变化的函数
+        const handleSelectionChange = () => {
+            const selection = window.getSelection();
+            // 确保有选中内容且选中区域在编辑器内
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                // 检查选中区域是否在编辑器内
+                const commonAncestor = range.commonAncestorContainer;
+                if (editorRef.value.contains(commonAncestor)) {
+                    console.log("选中区域在编辑器内", range);
+
+                    lastSelection = range;
+                }
+            }
+        };
+
         const isPTitle = ref(false);
 
         const paragraphTitle = () => {
@@ -501,7 +527,6 @@ const editApp = createApp({
             linkState.value = false;
             linkText.value = "";
             linkUrl.value = "";
-            
         };
 
         const insertLink = () => {
@@ -513,6 +538,10 @@ const editApp = createApp({
             a.href = linkUrl.value;
             a.target = "_blank";
             a.textContent = linkText.value;
+            console.log("insertLink", lastSelection);
+
+            // 先删除选中的内容，再插入链接
+            lastSelection.deleteContents();
             lastSelection.insertNode(a);
 
             // 移动光标到元素后面并确保光标位置被正确设置和获取