(()=>{
// 添加tab样式，可根据自己需要添加或修改样式
// 添加tab样式，可根据自己需要添加或修改样式
const tabStyles = [
'background-color:color-mix(in srgb, var(--b3-font-background1) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background2) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background3) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background4) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background5) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background6) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background7) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background8) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background9) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background10) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background11) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;',
'background-color:color-mix(in srgb, var(--b3-font-background12) 50%, transparent);border-radius: 5px; height: 28px; min-height:28px; line-height:28px;'
];
// 是否使用内联样式 yes使用，no使用外部样式
// 内联样式无法控制tab子元素样式，如果你需要控制tab子元素样式，则填no
const useInlineStyle = 'no';
// 手机版返回
if(isMobile()) return;
// 监听dock加载完毕
whenElementExist('.layout__center').then((center)=>{
const tabs = center.querySelectorAll('li[data-type="tab-header"]');
tabs.forEach((tab)=>{
setTabBackground(tab);
});
observeElementAdded(center, 'li[data-type="tab-header"]', (tab) => {
setTabBackground(tab);
});
});
function setTabBackground(tab) {
const style = getRandomStyle();
if(!style) return;
generateTabStyle(tab, style);
}
function generateTabStyle(tab, style) {
if(useInlineStyle === 'yes'){
tab.style = style;
} else {
// 添加margin-top微调位置
addStyle(`.layout-tab-bar .item[data-id="${tab.dataset.id}"]{${style} margin-top:2px;}`);
}
}
function addStyle(css) {
// 创建一个新的style元素
const style = document.createElement('style');
// 设置CSS规则
style.innerHTML = css;
// 将style元素添加到<head>中
document.head.appendChild(style);
}
let lastSelected = null; // 记录上一次选择的样式
function getRandomStyle(defaultStyle = '') {
const validStyles = tabStyles.filter(style => style.trim() !== '');
// 如果没有有效样式，返回默认样式
if (validStyles.length === 0) {
return defaultStyle;
}
// 如果只有一个有效样式，直接返回它
if (validStyles.length === 1) {
lastSelected = validStyles[0];
return validStyles[0];
}
let randomIndex, selectedStyle;
// 确保生成的样式与上一次不同
do {
randomIndex = Math.floor(Math.random() * validStyles.length);
selectedStyle = validStyles[randomIndex];
} while (selectedStyle === lastSelected);
// 更新 lastSelected 并返回结果
lastSelected = selectedStyle;
return selectedStyle;
}
/**
* 监控 center 的后代元素 li[data-type="tab-header"] 被添加
* @param {string} container - 容器选择器（如 "center"）
* @param {string} targetSelector - 目标元素选择器（如 "li[data-type='tab-header']")
* @param {Function} callback - 当目标元素被添加时的回调函数
*/
function observeElementAdded(container, targetSelector, callback) {
// 创建 MutationObserver 实例
const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
if (mutation.type === 'childList') {
// 遍历新增的节点
mutation.addedNodes.forEach((node) => {
// 检查新增节点是否匹配目标选择器
if (node.matches && node.matches(targetSelector)) {
callback(node); // 触发回调
}
});
}
});
});
// 配置观察选项
const config = {
childList: true, // 监听子节点的变化
subtree: true, // 监听所有后代节点的变化
};
// 开始观察
observer.observe(container, config);
// 返回 observer 实例，方便后续停止观察
return observer;
}
// 如果需要停止观察，可以调用 stopObserving.disconnect();
function isMobile() {
return !!document.getElementById("sidebar");
}
// 等待元素出现
function whenElementExist(selector, node) {
return new Promise(resolve => {
const check = () => {
const el = typeof selector==='function'?selector():(node||document).querySelector(selector);
if (el) resolve(el); else requestAnimationFrame(check);
};
check();
});
}
})();
基于原本 AI 调整了下
原贴: [js] 多彩 Tab
作者: wilsons
我就只是 AI 无脑调整了一丢丢
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于