yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 tabs增加滚动条

Browse Source
This commit is contained in:
yangchunlong
2025-07-28 10:03:07 +08:00
parent b3bffac35e
commit 1a97f75546
6 changed files with 773 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
src/components/Editor/quill-tabs.js
View File

@@ -28,7 +28,38 @@ class TabsBlot extends BlockEmbed {
`
);
// 标签栏
// 标签栏滚动容器 - 优化高度计算
const tabScrollContainer = document.createElement("div");
tabScrollContainer.className = "m-quill-tab-scroll-container";
tabScrollContainer.setAttribute(
"style",
`
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: hidden;
height: auto;
`
);
// height: auto; /* 自动高度 */
// Chrome, Safari 隐藏滚动条
tabScrollContainer.style.overflow = "auto";
tabScrollContainer.style.webkitOverflowScrolling = "touch";
tabScrollContainer.style.scrollbarWidth = "none";
tabScrollContainer.style.msOverflowStyle = "none";
// // 关键：隐藏滚动条但保留功能
// tabScrollContainer.innerHTML = `
// <style>
// .m-quill-tab-scroll-container::-webkit-scrollbar {
// display: none; /* Chrome, Safari 隐藏滚动条 */
// }
// </style>
// `;
// 标签栏 - 保持原有样式不变
const tabList = document.createElement("div");
tabList.className = "m-quill-tab-list";
tabList.setAttribute(
@@ -36,10 +67,54 @@ class TabsBlot extends BlockEmbed {
`
display: flex;
border-bottom: 1px solid #dddddd;
min-width: max-content; /* 确保内容撑开容器 */
`
);
// 内容区
// 生成标签按钮 - 优化内边距计算
tabs.forEach((tab, index) => {
const btn = document.createElement("button");
btn.className = `m-quill-tab-button`;
btn.setAttribute("data-index", index);
btn.textContent = tab.title;
btn.setAttribute(
"style",
`
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 5px; /* 增大间距 */
cursor: pointer;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
tabList.appendChild(btn);
});
// 编辑按钮 - 保持原有样式不变
const editBtn = document.createElement("button");
editBtn.className = "m-quill-tab-edit-btn";
editBtn.innerHTML = "编辑";
editBtn.setAttribute("data-action", "edit");
editBtn.setAttribute(
"style",
`
padding: 10px;
margin-left: auto;
color: #606266;
cursor: pointer;
width:50px;
background: transparent;
border: none;
display:block;
`
);
tabList.appendChild(editBtn);
// 内容区 - 保持原有样式不变
const contentList = document.createElement("div");
contentList.className = "m-quill-tab-content-list";
contentList.setAttribute(
@@ -49,31 +124,8 @@ class TabsBlot extends BlockEmbed {
`
);
// 生成标签按钮和内容面板
// 生成内容面板 - 保持原有样式不变
tabs.forEach((tab, index) => {
// 标签按钮
const btn = document.createElement("button");
btn.className = `m-quill-tab-button`;
btn.setAttribute("data-index", index);
btn.textContent = tab.title;
btn.setAttribute(
"style",
`
padding: 10px 15px;
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 60px;
cursor: pointer;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
tabList.appendChild(btn);
// 内容面板 - 关键修改：设置为可编辑
const panel = document.createElement("div");
panel.className = `m-quill-tab-content`;
panel.setAttribute("data-index", index);
@@ -85,88 +137,61 @@ class TabsBlot extends BlockEmbed {
min-height: 50px;
`
);
panel.contentEditable = "false"; // 内容面板可编辑
panel.contentEditable = "false";
contentList.appendChild(panel);
});
// 编辑按钮
const editBtn = document.createElement("button");
editBtn.className = "m-quill-tab-edit-btn";
editBtn.innerHTML = "编辑";
editBtn.setAttribute("data-action", "edit");
editBtn.setAttribute(
"style",
`
padding: 10px;
margin-left: auto;
color: #606266;
cursor: pointer;
background: transparent;
border: none;
display:block;
`
);
// display: flex;
//align-items: center;
// editBtn.onmouseover = () => {
// editBtn.style.color = "#007bff";
// };
// editBtn.onmouseout = () => {
// editBtn.style.color = "#606266";
// };
tabList.appendChild(editBtn);
// 组装结构
tabScrollContainer.appendChild(tabList);
node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
node.appendChild(contentList); // 内容区
// 标签页切换逻辑
// 标签页切换逻辑 - 保持原有逻辑不变
const scriptTag = document.createElement("script");
// 修改 scriptTag.textContent 中的逻辑
scriptTag.textContent = `
(function() {
const container = document.currentScript.parentElement;
const isAdmin = window.location.pathname.includes('/admin');
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
// 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
if (!isAdmin && editBtn1) {
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
} else if (isAdmin && editBtn1) {
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
}
// 非管理系统才执行标签切换逻辑（管理系统不执行）
if (!isAdmin) {
const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
const contentPanels = container.querySelectorAll('.m-quill-tab-content');
tabButtons.forEach(btn => {
btn.addEventListener('click', function() {
const index = parseInt(this.dataset.index);
tabButtons.forEach((b, i) => {
b.setAttribute('style', \`
padding: 10px 15px;
font-weight: 900;
cursor: pointer;
background: transparent;
font-size:16px;
margin-right: 60px;
color: #8f9099;
border: none;
\${i === index ?
'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' :
''
}
\`);
});
contentPanels.forEach((panel, i) => {
panel.style.display = i === index ? 'block' : 'none';
});
(function() {
const container = document.currentScript.parentElement;
const isAdmin = window.location.pathname.includes('/admin');
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
// 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
if (!isAdmin && editBtn1) {
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
} else if (isAdmin && editBtn1) {
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
}
// 非管理系统才执行标签切换逻辑（管理系统不执行）
if (!isAdmin) {
const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
const contentPanels = container.querySelectorAll('.m-quill-tab-content');
tabButtons.forEach(btn => {
btn.addEventListener('click', function() {
const index = parseInt(this.dataset.index);
tabButtons.forEach((b, i) => {
b.setAttribute('style', \`
font-weight: 900;
cursor: pointer;
background: transparent;
font-size:16px;
margin-right: 5px;
color: #8f9099;
border: none;
\${i === index ?
'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' :
''
}
\`);
});
contentPanels.forEach((panel, i) => {
panel.style.display = i === index ? 'block' : 'none';
});
});
}
})();
`;
});
}
})();
`;
node.appendChild(tabList);
node.appendChild(contentList);
node.appendChild(scriptTag);
node.setAttribute("contenteditable", "false");
return node;
@@ -177,15 +202,12 @@ class TabsBlot extends BlockEmbed {
this.eventBoundElements = new WeakMap();
}
// 移除 eventBoundElements 依赖，直接重新绑定事件（避免弱映射导致的问题）
// 编辑按钮事件 - 保持原有逻辑不变
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
if (editBtn) {
// 先移除旧事件，避免重复绑定
editBtn.removeEventListener("click", this.handleEditClick);
// 绑定新事件（使用箭头函数确保 this 指向正确）
this.handleEditClick = e => {
e.stopPropagation();
console.log("1232323");
this.domNode.dispatchEvent(
new CustomEvent("edit-tabs", {
bubbles: true,
@@ -196,7 +218,7 @@ class TabsBlot extends BlockEmbed {
editBtn.addEventListener("click", this.handleEditClick);
}
// 标签切换事件
// 标签切换事件 - 保持原有逻辑不变
const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
tabButtons.forEach(btn => {
if (!this.eventBoundElements.has(btn)) {
@@ -209,9 +231,8 @@ class TabsBlot extends BlockEmbed {
});
}
// 增强版删除键处理
// 增强版删除键处理 - 保持原有逻辑不变
bindDeleteKeyEvent() {
// 阻止从外部删除整个组件
this.domNode.addEventListener(
"keydown",
e => {
@@ -222,30 +243,26 @@ class TabsBlot extends BlockEmbed {
const range = selection.getRangeAt(0);
const parentBlock = this.domNode;
// 判断光标是否在组件内部
const isInside = parentBlock.contains(range.commonAncestorContainer);
// 如果光标在组件外部，阻止删除
if (!isInside) {
e.preventDefault();
return;
}
// 检查是否选中了整个组件
if (
range.startContainer === parentBlock &&
range.endContainer === parentBlock &&
range.startOffset === 0 &&
range.endOffset >= parentBlock.childNodes.length
) {
e.preventDefault(); // 阻止删除整个组件
e.preventDefault();
}
}
},
true
); // 使用捕获阶段
);
// 标签栏禁止编辑
const tabList = this.domNode.querySelector(".m-quill-tab-list");
if (tabList) {
tabList.querySelectorAll("*").forEach(el => {
@@ -258,17 +275,18 @@ class TabsBlot extends BlockEmbed {
const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
// 保持原有样式逻辑不变
buttons.forEach((btn, i) => {
btn.setAttribute(
"style",
`
padding: 10px 15px;
font-weight: 900;
cursor: pointer;
background: transparent;
border: none;
font-size:16px;
margin-right: 60px;
margin-right: 5px;
color: #8f9099;
border-bottom: 3px solid transparent;
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
@@ -279,6 +297,17 @@ class TabsBlot extends BlockEmbed {
panels.forEach((panel, i) => {
panel.style.display = i === index ? "block" : "none";
});
// 滚动到当前选中的标签
const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
const activeBtn = buttons[index];
if (scrollContainer && activeBtn) {
activeBtn.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
});
}
}
static value(node) {
@@ -301,26 +330,23 @@ class TabsBlot extends BlockEmbed {
const scriptTag = this.domNode.querySelector("script");
if (scriptTag) {
const newScript = document.createElement("script");
newScript.textContent = scriptTag.textContent;
scriptTag.parentNode.replaceChild(newScript, scriptTag);
}
this.bindEvents();
this.bindDeleteKeyEvent(); // 重新绑定删除事件
this.bindDeleteKeyEvent();
}
getValue() {
return TabsBlot.value(this.domNode);
}
// 更新标签页数据（编辑后更新 DOM）
// 更新标签页数据 - 保持原有逻辑不变
updateContents(tabs) {
// 清空原有内容
const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
const tabList = this.domNode.querySelector(".m-quill-tab-list");
// 保留编辑按钮（如果需要）
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
// 清空标签栏和内容区（保留编辑按钮）
Array.from(tabList.children).forEach(child => {
if (!child.classList.contains("m-quill-tab-edit-btn")) {
child.remove();
@@ -328,9 +354,7 @@ class TabsBlot extends BlockEmbed {
});
contentList.innerHTML = "";
// 重新渲染标签页（复用 create 方法中的逻辑）
tabs.forEach((tab, index) => {
// 重建标签按钮
const btn = document.createElement("button");
btn.className = "m-quill-tab-button";
btn.setAttribute("data-index", index);
@@ -338,20 +362,18 @@ class TabsBlot extends BlockEmbed {
btn.setAttribute(
"style",
`
padding: 10px 15px;
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 60px;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 5px;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
tabList.insertBefore(btn, editBtn);
// 重建内容面板
const panel = document.createElement("div");
panel.className = "m-quill-tab-content";
panel.setAttribute("data-index", index);
@@ -359,15 +381,14 @@ class TabsBlot extends BlockEmbed {
panel.setAttribute(
"style",
`
display: ${index === 0 ? "block" : "none"};
min-height: 50px;
`
display: ${index === 0 ? "block" : "none"};
min-height: 50px;
`
);
panel.contentEditable = "false";
contentList.appendChild(panel);
});
// 重新绑定事件（确保切换功能正常）
this.bindEvents();
}
}