class OverviewPage extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.versions = []; } connectedCallback() { this.loadVersions().then(() => { this.render(); this.startClock(); this.setupEventListeners(); }).catch(error => { console.error('加载版本信息失败:', error); this.render(); this.startClock(); this.setupEventListeners(); }); } disconnectedCallback() { if (this.clockInterval) { clearInterval(this.clockInterval); } } async loadVersions() { try { const response = await fetch('/api/versions'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } this.versions = await response.json(); } catch (error) { console.error('加载版本信息失败:', error); this.versions = []; } } formatVersionRecord(version) { const date = version.date; const time = version.time; const verNum = version.verNum; const title = version.title; return `【${date} ${time}】v${verNum} ${title}`; } startClock() { const updateClock = () => { const dateElement = this.shadowRoot.querySelector('.current-time .date'); const timeElement = this.shadowRoot.querySelector('.current-time .time'); const now = new Date(); dateElement.textContent = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }); timeElement.textContent = now.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }); }; updateClock(); this.clockInterval = setInterval(updateClock, 1000); } setupEventListeners() { const detailsLink = this.shadowRoot.querySelector('.details-link'); if (detailsLink) { detailsLink.addEventListener('click', (e) => { e.preventDefault(); // 获取子工具栏 const subToolbar = document.querySelector('sub-toolbar'); if (subToolbar) { // 触发与更新记录按钮相同的事件 const event = new CustomEvent('sub-item-selected', { detail: { parent: 'home', text: '更新记录', icon: 'clock' }, bubbles: true, composed: true }); subToolbar.dispatchEvent(event); // 激活更新记录按钮 const updateRecordButton = subToolbar.shadowRoot.querySelector('.sub-item[data-icon="clock"]'); if (updateRecordButton) { // 移除其他按钮的激活状态 const siblings = updateRecordButton.parentElement.querySelectorAll('.sub-item'); siblings.forEach(si => si.classList.remove('active')); // 激活更新记录按钮 updateRecordButton.classList.add('active'); } } }); } // 添加Q&A和帮助链接的事件监听 const qaLink = this.shadowRoot.querySelector('#qa-link'); const helpLink = this.shadowRoot.querySelector('#help-link'); if (qaLink) { qaLink.addEventListener('click', (e) => { e.preventDefault(); // 获取子工具栏 const subToolbar = document.querySelector('sub-toolbar'); if (subToolbar) { // 触发与常见问题按钮相同的事件 const event = new CustomEvent('sub-item-selected', { detail: { parent: 'home', text: 'Q&A', icon: 'question' }, bubbles: true, composed: true }); subToolbar.dispatchEvent(event); } }); } if (helpLink) { helpLink.addEventListener('click', (e) => { e.preventDefault(); // 获取子工具栏 const subToolbar = document.querySelector('sub-toolbar'); if (subToolbar) { // 触发与帮助文档按钮相同的事件 const event = new CustomEvent('sub-item-selected', { detail: { parent: 'home', text: '帮助', icon: 'help' }, bubbles: true, composed: true }); subToolbar.dispatchEvent(event); } }); } } render() { // 添加加载状态的样式 const style = ` .update-list { min-height: 100px; position: relative; } .update-list.loading::after { content: '加载中...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666; } .update-list.error::after { content: '加载失败'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ff4444; } `; this.shadowRoot.innerHTML = `

欢迎使用 XNSim

XNSim 是一个功能强大的仿真系统，为您提供专业的飞行模拟仿真分析工具和直观的操作界面。

当前时间

版本信息

${this.versions.length > 0 ? ` ` : `
版本信息加载中...
`}

关于系统

XNSim 是新一代飞行模拟数据包仿真分析平台，致力于提供高效、准确的飞行模拟仿真解决方案。

Q&A 帮助

日历

日 一 二 三 四 五 六

更新记录

详细信息
`; // 初始化日历显示 const now = new Date(); const calendarElement = this.shadowRoot.querySelector('.calendar'); calendarElement.querySelector('.month').textContent = now.toLocaleString('zh-CN', { month: 'long' }); calendarElement.querySelector('.calendar-grid').innerHTML = this.generateCalendarGrid(now); } generateCalendarGrid(date) { const year = date.getFullYear(); const month = date.getMonth(); const today = new Date(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const firstDay = new Date(year, month, 1).getDay(); const lastDayPrevMonth = new Date(year, month, 0).getDate(); let gridHtml = ''; // 上个月的日期 for (let i = firstDay - 1; i >= 0; i--) { gridHtml += `
${lastDayPrevMonth - i}
`; } // 当月的日期 for (let day = 1; day <= daysInMonth; day++) { const isToday = day === today.getDate() && month === today.getMonth() && year === today.getFullYear(); gridHtml += `
${day}
`; } // 下个月的日期 const remainingDays = 42 - (firstDay + daysInMonth); // 保持6行格式 for (let day = 1; day <= remainingDays; day++) { gridHtml += `
${day}
`; } return gridHtml; } } customElements.define('overview-page', OverviewPage);