root/LLZQ-XCX
1
0
Fork 0
generated from root/feiqiu-ETL
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:引入 TDesign 以及前端初稿

Browse Source
This commit is contained in:
Neo
2026-01-24 22:56:57 +08:00
parent 6147924889
commit c972c52e04
80 changed files with 35245 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
Prototype/js/bottom-nav.js Normal file
View File

@@ -0,0 +1,91 @@
/**
* 通用底部导航组件
* 在所有需要底部导航的页面引入此脚本即可自动生成底部导航栏
*/
(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);
}
})();