class HelpComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
}
setupEventListeners() {
// 设置分类展开/折叠功能
const categoryTitles = this.shadowRoot.querySelectorAll('.category-title');
categoryTitles.forEach(title => {
title.addEventListener('click', () => {
title.classList.toggle('expanded');
const items = title.nextElementSibling;
items.classList.toggle('expanded');
});
});
// 设置帮助项点击事件
const helpItems = this.shadowRoot.querySelectorAll('.help-item');
helpItems.forEach(item => {
item.addEventListener('click', () => {
// 移除所有活动状态
helpItems.forEach(i => i.classList.remove('active'));
// 添加活动状态到当前项
item.classList.add('active');
// 加载对应的帮助内容(实际项目中应该调用加载内容的方法)
this.loadHelpContent(item.textContent);
});
});
// 设置搜索功能
const searchInput = this.shadowRoot.querySelector('.search-input');
searchInput.addEventListener('input', () => {
this.searchHelp(searchInput.value);
});
}
loadHelpContent(topic) {
console.log(`加载帮助内容: ${topic}`);
// 在此处添加实际加载帮助内容的逻辑
}
searchHelp(keyword) {
console.log(`搜索帮助: ${keyword}`);
// 在此处添加实际搜索帮助内容的逻辑
}
}
customElements.define('help-component', HelpComponent);