/**
* 通用底部导航组件
* 在所有需要底部导航的页面引入此脚本即可自动生成底部导航栏
*/
(function() {
// 获取当前页面路径
const currentPath = window.location.pathname;
const currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);
// 判断当前激活的tab
const isTaskActive = currentPage === 'task-list.html';
const isBoardActive = currentPage.startsWith('board-');
const isMyActive = currentPage === 'my-profile.html';
// 统一的图标定义 - 激活态用fill+stroke，未激活态用stroke
const icons = {
// 任务图标 - 剪贴板带勾选
task: {
active: ``,
inactive: ``
},
// 看板图标 - 三个柱状图
board: {
active: ``,
inactive: ``
},
// 我的图标 - 人物头像
my: {
active: ``,
inactive: ``
}
};
// 创建底部导航HTML
const navHTML = `
`;
// 等待DOM加载完成后插入导航
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', insertNav);
} else {
insertNav();
}
function insertNav() {
// 移除页面中已有的底部导航（如果有的话）
const existingNav = document.querySelector('nav.fixed.bottom-0, div.fixed.bottom-0[class*="h-16"]');
if (existingNav && (existingNav.querySelector('a[href*="task-list"]') || existingNav.querySelector('a[href*="board-"]') || existingNav.querySelector('a[href*="my-profile"]'))) {
existingNav.remove();
}
// 插入新导航到body末尾
document.body.insertAdjacentHTML('beforeend', navHTML);
}
})();