class HelpComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { this.render(); this.setupEventListeners(); } render() { this.shadowRoot.innerHTML = `
入门指南
系统概述
快速开始
基本概念
用户界面
功能指南
创建模型
运行仿真
数据分析
监控与调试
参数配置
高级功能
API接口
自定义扩展
脚本编程
性能优化
常见问题
账户与权限
连接问题
数据导入导出
错误诊断
系统概述
这里显示系统概述
`; } 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);