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-29 11:41:09 +08:00
parent 1a97f75546
commit 41da6b1914
10 changed files with 451 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,6 +38,7 @@ class TabsBlot extends BlockEmbed {
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: hidden;
overflow-x: auto;
height: auto;
`
);
@@ -50,15 +51,6 @@ class TabsBlot extends BlockEmbed {
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";
@@ -66,7 +58,7 @@ class TabsBlot extends BlockEmbed {
"style",
`
display: flex;
border-bottom: 1px solid #dddddd;
border-bottom: 2px solid #dddddd;
min-width: max-content; /* 确保内容撑开容器 */
`
);
@@ -85,8 +77,10 @@ class TabsBlot extends BlockEmbed {
cursor: pointer;
background: transparent;
border: none;
margin-right: 5px; /* 增大间距 */
padding-bottom:14px;
margin-right:3%; /* 增大间距 */
cursor: pointer;
white-space:nowrap;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
@@ -106,7 +100,8 @@ class TabsBlot extends BlockEmbed {
margin-left: auto;
color: #606266;
cursor: pointer;
width:50px;
width:60px;
padding-left:20px;
background: transparent;
border: none;
display:block;
@@ -134,7 +129,7 @@ class TabsBlot extends BlockEmbed {
"style",
`
display: ${index === 0 ? "block" : "none"};
min-height: 50px;
min-height: 50px;
`
);
panel.contentEditable = "false";
@@ -152,13 +147,14 @@ class TabsBlot extends BlockEmbed {
(function() {
const container = document.currentScript.parentElement;
const isAdmin = window.location.pathname.includes('/admin');
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
// 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
if (!isAdmin && editBtn1) {
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
} else if (isAdmin && editBtn1) {
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
editBtn1.style.width='60px';
editBtn1.style.minWidth='60px';
}
// 非管理系统才执行标签切换逻辑（管理系统不执行）
@@ -174,7 +170,9 @@ class TabsBlot extends BlockEmbed {
cursor: pointer;
background: transparent;
font-size:16px;
margin-right: 5px;
white-space:nowrap;
padding-bottom:14px;
margin-right:3%;
color: #8f9099;
border: none;
\${i === index ?
@@ -186,6 +184,16 @@ class TabsBlot extends BlockEmbed {
contentPanels.forEach((panel, i) => {
panel.style.display = i === index ? 'block' : 'none';
});
// 添加滚动逻辑到自执行函数中
const scrollContainer = container.querySelector(".m-quill-tab-scroll-container");
const activeBtn = tabButtons[index];
if (scrollContainer && activeBtn) {
activeBtn.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
});
}
});
});
}
@@ -280,13 +288,14 @@ class TabsBlot extends BlockEmbed {
btn.setAttribute(
"style",
`
font-weight: 900;
cursor: pointer;
background: transparent;
border: none;
font-size:16px;
margin-right: 5px;
padding-bottom:14px;
margin-right:3%;
white-space:nowrap;
color: #8f9099;
border-bottom: 3px solid transparent;
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
@@ -367,7 +376,9 @@ class TabsBlot extends BlockEmbed {
cursor: pointer;
background: transparent;
border: none;
margin-right: 5px;
padding-bottom:14px;
margin-right:3%;
white-space:nowrap;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`