dellevin/BaiTu-homepage
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加历史足迹

Browse Source
This commit is contained in:
DelLevin-Home
2026-01-27 00:08:18 +08:00
parent cdeff57e2c
commit 4484646f48
18 changed files with 1190 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
static/js/tabchange.js
View File

@@ -1,60 +1,105 @@
// ==================== 标签切换功能 ====================
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');
// 移除所有激活状态
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');
});
});
// ==================== 标签切换功能 ====================
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("切换标签前已销毁旧地图实例");
}
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("未找到“我的网站”标签或内容区域。");
}
// 移除所有激活状态
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 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 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("未找到“足迹”标签或内容区域。");
}
});