html 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
    <style>
        :root {
            --bs-primary: #2c3e50;
            --bs-secondary: #3498db;
        }

        /* 页面切换动画 */
        .page-container {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .page-active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 侧边栏优化 */
        .main-sidebar {
            background: var(--bs-primary);
            border-right: 1px solid rgba(255,255,255,0.1);
            min-height: 100vh;
            transition: transform 0.3s ease;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .offcanvas-start {
                width: 280px;
            }
        }
    </style>
</head>
<body class="bg-light">
<div class="container-fluid vh-100">
    <div class="row h-100">
        <!-- 侧边栏 -->
        <nav class="col-md-3 col-xl-2 main-sidebar d-none d-md-block">
            <div class="pt-4 px-3">
                <h4 class="text-white mb-4"><i class="bi bi-stack"></i> 管理系统</h4>
                <ul class="nav flex-column gap-2" id="mainNav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard" data-page="dashboard">
                            <i class="bi bi-speedometer2 me-2"></i>数据看板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#users" data-page="users">
                            <i class="bi bi-people me-2"></i>用户管理
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 主内容区 -->
        <main class="col-md-9 col-xl-10 p-4">
            <!-- 仪表盘页面 -->
            <div id="dashboard" class="page-container page-active">
                <div class="data-card p-4 mb-4">
                    <h5 class="mb-4"><i class="bi bi-bar-chart-line me-2"></i>数据概览</h5>
                    <!-- 图表内容 -->
                </div>
            </div>

            <!-- 用户管理页面 -->
            <div id="users" class="page-container">
                <div class="data-card p-4">
                    <h5 class="mb-4"><i class="bi bi-table me-2"></i>用户列表</h5>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>姓名</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="userList"></tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- 页面切换脚本 -->
<script>
    // 页面切换功能
    function switchPage(targetPage) {
        // 隐藏所有页面
        document.querySelectorAll('.page-container').forEach(page => {
            page.classList.remove('page-active');
        });

        // 显示目标页面
        const activePage = document.getElementById(targetPage);
        if (activePage) {
            activePage.classList.add('page-active');
        }

        // 更新导航状态
        document.querySelectorAll('#mainNav .nav-link').forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('data-page') === targetPage) {
                link.classList.add('active');
            }
        });
    }

    // 路由监听
    window.addEventListener('hashchange', () => {
        const page = window.location.hash.replace('#', '');
        switchPage(page || 'dashboard');
    });

    // 初始化路由
    window.addEventListener('DOMContentLoaded', () => {
        const initialPage = window.location.hash.replace('#', '') || 'dashboard';
        switchPage(initialPage);
    });
</script>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

class PageRouter {
    constructor() {
        this.contentContainer = document.getElementById('main-content');
        this.initNavigation();
        this.initHistory();
    }

    // 初始化导航事件‌:ml-citation{ref="6,7" data="citationList"}
    initNavigation() {
        document.querySelectorAll('[data-page]').forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();
                const pageName = e.target.dataset.page;
                this.loadPage(pageName);
                history.pushState({ page: pageName }, '', `#${pageName}`);
            });
        });
    }

    // 加载页面内容‌:ml-citation{ref="1,5" data="citationList"}
    async loadPage(pageName) {
        try {
            const response = await fetch(`pages/${pageName}.html`);
            const html = await response.text();
            this.contentContainer.innerHTML = html;
            this.updateActiveNav(pageName);
        } catch (error) {
            this.contentContainer.innerHTML = '<p>页面加载失败</p>';
        }
    }

    // 更新导航状态‌:ml-citation{ref="6" data="citationList"}
    updateActiveNav(pageName) {
        document.querySelectorAll('[data-page]').forEach(link => {
            link.classList.toggle('active', link.dataset.page === pageName);
        });
    }

    // 处理浏览器历史‌:ml-citation{ref="7" data="citationList"}
    initHistory() {
        window.addEventListener('popstate', (e) => {
            const page = e.state?.page || 'dashboard';
            this.loadPage(page);
        });

        // 初始加载
        const initialPage = window.location.hash.replace('#', '') || 'dashboard';
        this.loadPage(initialPage);
    }
}

// 初始化路由
new PageRouter();

 

posted @ 2025-03-05 14:05  大道至简、  阅读(17)  评论(0)    收藏  举报