349 lines
12 KiB
JavaScript
349 lines
12 KiB
JavaScript
|
class TabsContainer extends HTMLElement {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
this.attachShadow({ mode: 'open' });
|
|||
|
|
this.openTabs = new Set();
|
|||
|
|
this.currentActiveTabId = null; // 跟踪当前激活的标签页ID
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
connectedCallback() {
|
|||
|
|
this.render();
|
|||
|
|
this.setupEventListeners();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
this.shadowRoot.innerHTML = `
|
|||
|
|
<style>
|
|||
|
|
:host {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-container {
|
|||
|
|
background-color: white;
|
|||
|
|
border-bottom: 1px solid #e0e0e0;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 4px;
|
|||
|
|
height: 41px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-header {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 0 32px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
height: 40px;
|
|||
|
|
flex: 1;
|
|||
|
|
scroll-behavior: smooth;
|
|||
|
|
scrollbar-width: none;
|
|||
|
|
-ms-overflow-style: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-header::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border: 1px solid #e0e0e0;
|
|||
|
|
border-bottom: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-right: -1px;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 4px 4px 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab:hover {
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab span {
|
|||
|
|
margin: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
display: inline-block;
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab.active {
|
|||
|
|
background-color: white;
|
|||
|
|
border-bottom: none;
|
|||
|
|
margin-top: 0;
|
|||
|
|
height: calc(100% + 1px);
|
|||
|
|
z-index: 1;
|
|||
|
|
box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab.active span {
|
|||
|
|
color: #8B6DB3;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab.active::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 2px;
|
|||
|
|
background-color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-small {
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-tab {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
opacity: 0.5;
|
|||
|
|
transition: opacity 0.3s;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-tab:hover {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-tab img {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-scroll-button {
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
background-color: #7986E7;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: none;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
z-index: 10;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
border: none;
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-scroll-button:hover {
|
|||
|
|
background-color: rgba(0,0,0,0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-scroll-button.left {
|
|||
|
|
left: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-scroll-button.right {
|
|||
|
|
right: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-scroll-button.show {
|
|||
|
|
display: flex;
|
|||
|
|
opacity: 1;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="tabs-container">
|
|||
|
|
<div class="tabs-scroll-button left" id="scrollLeft">
|
|||
|
|
<img src="assets/icons/png/chevron-dleft_b.png" alt="向左滚动" class="icon-small">
|
|||
|
|
</div>
|
|||
|
|
<div class="tabs-header"></div>
|
|||
|
|
<div class="tabs-scroll-button right" id="scrollRight">
|
|||
|
|
<img src="assets/icons/png/chevron-dright_b.png" alt="向右滚动" class="icon-small">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setupEventListeners() {
|
|||
|
|
const tabsHeader = this.shadowRoot.querySelector('.tabs-header');
|
|||
|
|
const scrollLeftBtn = this.shadowRoot.getElementById('scrollLeft');
|
|||
|
|
const scrollRightBtn = this.shadowRoot.getElementById('scrollRight');
|
|||
|
|
|
|||
|
|
// 检查是否需要显示滚动按钮
|
|||
|
|
const checkScrollButtons = () => {
|
|||
|
|
const { scrollLeft, scrollWidth, clientWidth } = tabsHeader;
|
|||
|
|
const hasScroll = scrollWidth > clientWidth;
|
|||
|
|
|
|||
|
|
scrollLeftBtn.classList.toggle('show', hasScroll && scrollLeft > 0);
|
|||
|
|
scrollRightBtn.classList.toggle('show', hasScroll && scrollLeft < scrollWidth - clientWidth - 1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 添加滚动事件监听
|
|||
|
|
tabsHeader.addEventListener('scroll', checkScrollButtons);
|
|||
|
|
window.addEventListener('resize', checkScrollButtons);
|
|||
|
|
|
|||
|
|
// 滚动按钮点击事件
|
|||
|
|
scrollLeftBtn.addEventListener('click', () => {
|
|||
|
|
tabsHeader.scrollBy({ left: -200, behavior: 'smooth' });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
scrollRightBtn.addEventListener('click', () => {
|
|||
|
|
tabsHeader.scrollBy({ left: 200, behavior: 'smooth' });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加 MutationObserver 监听标签页的变化
|
|||
|
|
const observer = new MutationObserver(checkScrollButtons);
|
|||
|
|
observer.observe(tabsHeader, {
|
|||
|
|
childList: true,
|
|||
|
|
subtree: true,
|
|||
|
|
attributes: true,
|
|||
|
|
attributeFilter: ['class']
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始检查滚动按钮状态
|
|||
|
|
checkScrollButtons();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
activateTab(id) {
|
|||
|
|
const activeTab = this.shadowRoot.querySelector(`.tab[data-tab="${id}"]`);
|
|||
|
|
if (!activeTab) return;
|
|||
|
|
|
|||
|
|
// 检查是否是当前已激活的标签页，如果是则不触发事件
|
|||
|
|
if (this.currentActiveTabId === id) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 记录新的激活标签页ID
|
|||
|
|
const previousTabId = this.currentActiveTabId;
|
|||
|
|
this.currentActiveTabId = id;
|
|||
|
|
|
|||
|
|
this.shadowRoot.querySelectorAll('.tab').forEach(tab => {
|
|||
|
|
tab.classList.toggle('active', tab.getAttribute('data-tab') === id);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const title = activeTab.getAttribute('data-title') || activeTab.querySelector('span').textContent;
|
|||
|
|
const parentText = activeTab.getAttribute('data-parent-text') || '主页';
|
|||
|
|
const parentTool = activeTab.getAttribute('data-parent-tool');
|
|||
|
|
|
|||
|
|
// 触发标签页激活事件，并传递前一个标签页ID
|
|||
|
|
this.dispatchEvent(new CustomEvent('tab-activated', {
|
|||
|
|
detail: {
|
|||
|
|
id,
|
|||
|
|
title,
|
|||
|
|
parentText,
|
|||
|
|
parentTool,
|
|||
|
|
previousTabId, // 添加前一个标签页ID
|
|||
|
|
isTabSwitch: true // 标记为真正的标签切换
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
// 同步左侧子工具栏选中状态
|
|||
|
|
if (parentTool) {
|
|||
|
|
// 先选中主工具栏
|
|||
|
|
const mainToolbar = document.querySelector('main-toolbar');
|
|||
|
|
const mainToolItem = mainToolbar.shadowRoot.querySelector(`.tool-item[data-tool="${parentTool}"]`);
|
|||
|
|
if (mainToolItem) {
|
|||
|
|
// 移除所有工具项的激活状态
|
|||
|
|
mainToolbar.shadowRoot.querySelectorAll('.tool-item').forEach(t => t.classList.remove('active'));
|
|||
|
|
// 激活当前工具项
|
|||
|
|
mainToolItem.classList.add('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 再同步子工具栏
|
|||
|
|
const subToolbar = document.querySelector('sub-toolbar');
|
|||
|
|
subToolbar.setAttribute('current-tool', parentTool);
|
|||
|
|
|
|||
|
|
// 找到并点击对应的子菜单项
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const subMenuItems = subToolbar.shadowRoot.querySelectorAll('.sub-item');
|
|||
|
|
const targetSubItem = Array.from(subMenuItems).find(item =>
|
|||
|
|
item.textContent.trim() === title &&
|
|||
|
|
item.closest('.sub-menu').getAttribute('data-parent') === parentTool
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (targetSubItem) {
|
|||
|
|
// 移除所有子菜单项的激活状态
|
|||
|
|
subMenuItems.forEach(item => item.classList.remove('active'));
|
|||
|
|
// 激活当前子菜单项
|
|||
|
|
targetSubItem.classList.add('active');
|
|||
|
|
}
|
|||
|
|
}, 0); // 使用setTimeout确保DOM已更新
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createTab(id, title, icon, parentText, parentTool) {
|
|||
|
|
// 对于其他标签页，如果已经打开则激活
|
|||
|
|
if (this.openTabs.has(id)) {
|
|||
|
|
this.activateTab(id);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const tab = document.createElement('div');
|
|||
|
|
tab.className = 'tab';
|
|||
|
|
tab.setAttribute('data-tab', id);
|
|||
|
|
tab.setAttribute('data-parent-text', parentText || '主页');
|
|||
|
|
tab.setAttribute('data-parent-tool', parentTool || 'home');
|
|||
|
|
tab.setAttribute('data-title', title);
|
|||
|
|
tab.innerHTML = `
|
|||
|
|
<img src="assets/icons/png/${icon}_b.png" alt="${title}" class="icon-small">
|
|||
|
|
<span>${title}</span>
|
|||
|
|
${id !== 'overview' ? '<div class="close-tab"><img src="assets/icons/png/close_b.png" alt="关闭"></div>' : ''}
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
this.shadowRoot.querySelector('.tabs-header').appendChild(tab);
|
|||
|
|
|
|||
|
|
tab.addEventListener('click', () => {
|
|||
|
|
this.activateTab(id);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (id !== 'overview') {
|
|||
|
|
const closeBtn = tab.querySelector('.close-tab');
|
|||
|
|
closeBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
this.closeTab(id);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.openTabs.add(id);
|
|||
|
|
this.activateTab(id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
closeTab(id) {
|
|||
|
|
if (id === 'overview') return;
|
|||
|
|
|
|||
|
|
const tab = this.shadowRoot.querySelector(`.tab[data-tab="${id}"]`);
|
|||
|
|
|
|||
|
|
if (tab.classList.contains('active')) {
|
|||
|
|
const prevTab = tab.previousElementSibling || tab.nextElementSibling;
|
|||
|
|
if (prevTab) {
|
|||
|
|
this.activateTab(prevTab.getAttribute('data-tab'));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tab.remove();
|
|||
|
|
this.openTabs.delete(id);
|
|||
|
|
|
|||
|
|
// 触发标签页关闭事件
|
|||
|
|
this.dispatchEvent(new CustomEvent('tab-closed', {
|
|||
|
|
detail: { id }
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
customElements.define('tabs-container', TabsContainer);
|