A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 使用sticky定位替代fixed定位，提升滚动体验
- 添加视频播放图标和图片展示功能
- 实现搜索框热门关键词轮播效果
- 优化编辑器链接插入功能
- 调整组件样式和布局细节
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-10 19:06:58 +08:00
parent b7feedb350
commit 5cdbeb249f
26 changed files with 517 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
js/edit.js
View File

@@ -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);
// 移动光标到元素后面并确保光标位置被正确设置和获取

7
js/index.js
View File

@@ -163,6 +163,8 @@ const appIndex = createApp({
// 列表下 滑动到底部 获取新数据
if (scrollTop + clientHeight >= scrollHeight - 40) getList();
sidebarHeight.value = -(sidebarRef.value.offsetHeight - window.innerHeight);
};
let offerlist = ref([]); // offer 列表滚动 数据
@@ -289,7 +291,10 @@ const appIndex = createApp({
BiComponent.initComponent();
};
return { clickbtn, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef };
const sidebarRef = ref(null);
let sidebarHeight = ref(0);
return { sidebarRef, sidebarHeight, clickbtn, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef };
},
});

39
js/search.js
View File

@@ -229,30 +229,37 @@ const appSearch = createApp({
const matterFixed = ref(false);
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = window.innerHeight;
const sideHeight = sidebarRef.value.offsetHeight;
const matterTop = matterRef.value.offsetTop;
const matterHeight = matterContentRef.value.offsetHeight;
matterHeight.value = -(document.querySelector(".matter-content").offsetHeight - window.innerHeight);
sidebarHeight.value = -(document.querySelector(".sidebar-box").offsetHeight - window.innerHeight);
console.log("sideHeight", sideHeight);
console.log("matterHeight", matterHeight);
if (sideHeight < matterHeight) {
// 侧边栏滚动固定
if (scrollTop >= matterTop + sideHeight - clientHeight) sidebarFixed.value = true;
else sidebarFixed.value = false;
} else {
if (scrollTop >= matterTop + matterHeight - clientHeight) matterFixed.value = true;
else matterFixed.value = false;
}
// const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// const clientHeight = window.innerHeight;
// const sideHeight = sidebarRef.value.offsetHeight;
// const matterTop = matterRef.value.offsetTop;
// const matterHeight = matterContentRef.value.offsetHeight;
// console.log("sideHeight", sideHeight);
// console.log("matterHeight", matterHeight);
// if (sideHeight < matterHeight) {
// // 侧边栏滚动固定
// if (scrollTop >= matterTop + sideHeight - clientHeight) sidebarFixed.value = true;
// else sidebarFixed.value = false;
// } else {
// if (scrollTop >= matterTop + matterHeight - clientHeight) matterFixed.value = true;
// else matterFixed.value = false;
// }
};
const matterRef = ref(null);
const sidebarRef = ref(null);
const matterContentRef = ref(null);
return { matterFixed, matterContentRef, sidebarFixed, matterRef, sidebarRef, loading, typeValue, kwValue, startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
let sidebarHeight = ref(0);
let matterHeight = ref(0);
return { matterHeight, sidebarHeight, matterFixed, matterContentRef, sidebarFixed, matterRef, sidebarRef, loading, typeValue, kwValue, startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
},
});
appSearch.component("item-forum", itemForum);