generated from root/feiqiu-ETL
92 lines
4.6 KiB
JavaScript
92 lines
4.6 KiB
JavaScript
/**
|
||
* 通用底部导航组件
|
||
* 在所有需要底部导航的页面引入此脚本即可自动生成底部导航栏
|
||
*/
|
||
(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: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||
<rect x="5" y="4" width="14" height="17" rx="2" fill="currentColor" stroke="currentColor" stroke-width="1"/>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" fill="currentColor" stroke="currentColor" stroke-width="1"/>
|
||
<path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>`,
|
||
inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="5" y="4" width="14" height="17" rx="2"/>
|
||
<rect x="8" y="2" width="8" height="4" rx="1"/>
|
||
<path d="M9 12l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>`
|
||
},
|
||
// 看板图标 - 三个柱状图
|
||
board: {
|
||
active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
|
||
<rect x="4" y="13" width="4" height="8" rx="1"/>
|
||
<rect x="10" y="8" width="4" height="13" rx="1"/>
|
||
<rect x="16" y="3" width="4" height="18" rx="1"/>
|
||
</svg>`,
|
||
inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="4" y="13" width="4" height="8" rx="1"/>
|
||
<rect x="10" y="8" width="4" height="13" rx="1"/>
|
||
<rect x="16" y="3" width="4" height="18" rx="1"/>
|
||
</svg>`
|
||
},
|
||
// 我的图标 - 人物头像
|
||
my: {
|
||
active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
|
||
<circle cx="12" cy="7" r="4"/>
|
||
<path d="M5.5 21a6.5 6.5 0 0113 0h-13z"/>
|
||
</svg>`,
|
||
inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="12" cy="7" r="4"/>
|
||
<path d="M5.5 21a6.5 6.5 0 0113 0h-13z"/>
|
||
</svg>`
|
||
}
|
||
};
|
||
|
||
// 创建底部导航HTML
|
||
const navHTML = `
|
||
<div id="bottomNav" class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-4 z-50">
|
||
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||
${isTaskActive ? icons.task.active : icons.task.inactive}
|
||
<span class="text-xs ${isTaskActive ? 'text-primary font-medium' : 'text-gray-6'}">任务</span>
|
||
</a>
|
||
<a href="board-finance.html" class="flex flex-col items-center gap-1">
|
||
${isBoardActive ? icons.board.active : icons.board.inactive}
|
||
<span class="text-xs ${isBoardActive ? 'text-primary font-medium' : 'text-gray-6'}">看板</span>
|
||
</a>
|
||
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||
${isMyActive ? icons.my.active : icons.my.inactive}
|
||
<span class="text-xs ${isMyActive ? 'text-primary font-medium' : 'text-gray-6'}">我的</span>
|
||
</a>
|
||
</div>
|
||
`;
|
||
|
||
// 等待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);
|
||
}
|
||
})();
|