generated from dellevin/template
106 lines
4.3 KiB
JavaScript
106 lines
4.3 KiB
JavaScript
// ==================== 标签切换功能 ====================
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const tabs = document.querySelectorAll(".nav-tab");
|
|
const contents = document.querySelectorAll(".tab-content");
|
|
tabs.forEach((tab) => {
|
|
tab.addEventListener("click", function () {
|
|
const tabId = this.getAttribute("data-tab");
|
|
// 在切换之前，如果当前是足迹页且地图已存在，销毁旧地图实例 (ECharts 版本)
|
|
const currentActiveTab = document.querySelector(".nav-tab.active");
|
|
if (
|
|
currentActiveTab &&
|
|
currentActiveTab.getAttribute("data-tab") === "footprint" &&
|
|
typeof MapFootprintModule !== "undefined"
|
|
) {
|
|
MapFootprintModule.destroyMap(); // 销毁之前的 ECharts 实例
|
|
console.log("切换标签前已销毁旧地图实例");
|
|
}
|
|
|
|
// 移除所有激活状态
|
|
tabs.forEach((t) => t.classList.remove("active"));
|
|
contents.forEach((c) => c.classList.remove("active"));
|
|
// 添加当前激活状态
|
|
this.classList.add("active");
|
|
document.getElementById(`${tabId}-content`).classList.add("active");
|
|
});
|
|
});
|
|
|
|
const websiteTab = document.querySelector('.nav-tab[data-tab="website"]');
|
|
const websiteContent = document.getElementById("website-content");
|
|
if (websiteTab && websiteContent) {
|
|
websiteTab.addEventListener("click", function () {
|
|
const hasRendered =
|
|
websiteContent.querySelector(".category-links") !== null;
|
|
if (!hasRendered) {
|
|
const savedLang = localStorage.getItem(LANG_KEY) || "zh";
|
|
renderWebsites(websitesData, translations, savedLang);
|
|
}
|
|
});
|
|
} else {
|
|
console.warn("未找到“我的网站”标签或内容区域。");
|
|
}
|
|
|
|
// 点击我的工具函数
|
|
const toolsTab = document.querySelector('.nav-tab[data-tab="tools"]');
|
|
const toolsContent = document.getElementById("tools-content");
|
|
if (toolsTab && toolsContent) {
|
|
toolsTab.addEventListener("click", function () {
|
|
const hasRendered = toolsContent.querySelector(".tool-item") !== null;
|
|
if (!hasRendered) {
|
|
renderTools(toolsData);
|
|
}
|
|
});
|
|
} else {
|
|
console.warn("未找到“我的工具”标签或内容区域，将在页面加载时尝试渲染。");
|
|
renderTools(toolsData);
|
|
}
|
|
// 点击常玩游戏函数
|
|
const gamesTab = document.querySelector('.nav-tab[data-tab="games"]');
|
|
const gamesContent = document.getElementById("games-content");
|
|
if (gamesTab && gamesContent) {
|
|
gamesTab.addEventListener("click", function () {
|
|
const hasRendered = gamesContent.querySelector(".game-item") !== null;
|
|
if (!hasRendered) {
|
|
renderGames(gamesData);
|
|
}
|
|
});
|
|
} else {
|
|
console.warn("未找到“常玩游戏”标签或内容区域。");
|
|
renderGames(gamesData);
|
|
}
|
|
|
|
// 点击足迹函数 (新增)
|
|
const footprintTab = document.querySelector('.nav-tab[data-tab="footprint"]');
|
|
const footprintContent = document.getElementById("footprint-content");
|
|
if (footprintTab && footprintContent) {
|
|
footprintTab.addEventListener("click", function () {
|
|
// 如果 MapFootprintModule 已加载（即 map-footprint.js 已成功执行）
|
|
if (typeof MapFootprintModule !== "undefined") {
|
|
// 调用模块中的 renderMap 函数来渲染地图
|
|
MapFootprintModule.renderMap(footprintContent);
|
|
} else {
|
|
// 如果模块未定义，说明 map-footprint.js 可能未加载或加载失败
|
|
console.error(
|
|
"MapFootprintModule 未定义，请确保 map-footprint.js 已正确加载且在 tabchange.js 之前。",
|
|
);
|
|
// 可以选择显示错误信息给用户
|
|
footprintContent.innerHTML =
|
|
'<p data-i18n="error_loading_map">加载地图失败，请刷新页面重试。</p>';
|
|
// 如果需要更新国际化文本，可以在这里处理
|
|
if (typeof translations !== "undefined") {
|
|
const errorElement = footprintContent.querySelector(
|
|
'[data-i18n="error_loading_map"]',
|
|
);
|
|
if (errorElement) {
|
|
const savedLang = localStorage.getItem(LANG_KEY) || "zh";
|
|
const translation = translations[savedLang]["error_loading_map"];
|
|
if (translation) errorElement.textContent = translation;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
console.warn("未找到“足迹”标签或内容区域。");
|
|
}
|
|
});
|