<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>极简管理框架 · 演示</title> <style> /* ===== 设计令牌 ===== */ :root { --header-h: 56px; --sidebar-w: 220px; --sidebar-collapsed-w: 64px; --content-padding: 24px; --grid-min-col: 260px; --grid-gap: 20px; --color-primary: #4f46e5; --color-bg: #f5f5f5; --color-surface: #fff; --color-sidebar: #1e1e2f; --color-text: #333; --transition: 0.25s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, sans-serif; background: var(--color-bg); height: 100vh; overflow: hidden; } /* ===== 整体网格布局 ===== */ .layout { display: grid; grid-template-areas: 'header header' 'sidebar main'; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr; height: 100vh; transition: grid-template-columns var(--transition); } .layout.collapsed { grid-template-columns: var(--sidebar-collapsed-w) 1fr; } /* ===== 顶部通栏 ===== */ .header { grid-area: header; background: var(--color-surface); border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; padding: 0 20px; gap: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); z-index: 10; } .logo { font-weight: 700; font-size: 1.2rem; color: var(--color-primary); margin-right: auto; } .collapse-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #666; } .collapse-btn:hover { background: #f0f0f0; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; } /* ===== 侧边菜单 ===== */ .sidebar { grid-area: sidebar; background: var(--color-sidebar); color: rgba(255, 255, 255, 0.85); display: flex; flex-direction: column; overflow-y: auto; transition: width var(--transition); } .menu-item { display: flex; align-items: center; padding: 14px 20px; gap: 14px; cursor: pointer; white-space: nowrap; transition: background 0.2s; border-left: 3px solid transparent; } .menu-item:hover { background: rgba(255, 255, 255, 0.05); } .menu-item.active { background: rgba(255, 255, 255, 0.08); border-left-color: var(--color-primary); color: #fff; } .menu-item .icon { font-size: 1.2rem; width: 22px; text-align: center; flex-shrink: 0; } .layout.collapsed .menu-item .label { display: none; } .layout.collapsed .menu-item { justify-content: center; padding: 14px 0; } /* ===== 右侧内容区 ===== */ .main { grid-area: main; display: flex; flex-direction: column; overflow: hidden; } .tab-bar { height: 42px; background: var(--color-surface); border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; padding: 0 16px; gap: 4px; flex-shrink: 0; } .tab { padding: 6px 16px; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 0.9rem; border: 1px solid transparent; background: transparent; } .tab.active { background: var(--color-bg); border-color: #e0e0e0; border-bottom-color: transparent; font-weight: 500; } .toolbar { height: 48px; background: var(--color-surface); display: flex; align-items: center; padding: 0 20px; gap: 12px; border-bottom: 1px solid #eee; flex-shrink: 0; } .toolbar .spacer { flex: 1; } .content-body { flex: 1; overflow-y: auto; padding: var(--content-padding); } /* ===== 弹性卡片网格 ===== */ .card-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(var(--grid-min-col), 1fr) ); gap: var(--grid-gap); align-content: start; } .card { background: var(--color-surface); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .card h3 { margin-bottom: 12px; font-size: 1rem; color: #666; } .card .value { font-size: 2rem; font-weight: 700; color: var(--color-primary); } /* 表格简例 */ .table-wrapper { background: var(--color-surface); border-radius: 10px; padding: 16px; margin-top: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; } th { font-weight: 500; color: #555; } /* ===== 移动端：侧边栏变抽屉 ===== */ @media (max-width: 768px) { .layout { grid-template-columns: 0 1fr; /* 侧边栏隐藏 */ } .layout.mobile-menu-open { grid-template-columns: var(--sidebar-w) 1fr; /* 打开时挤占空间 */ } .sidebar { position: fixed; left: 0; top: var(--header-h); bottom: 0; z-index: 20; width: var(--sidebar-w); transform: translateX(-100%); transition: transform var(--transition); } .layout.mobile-menu-open .sidebar { transform: translateX(0); } .collapse-btn { display: block; } .card-grid { --grid-min-col: 160px; --grid-gap: 12px; } .content-body { padding: 16px; } } </style> </head> <body> <div class="layout" id="layout"> <!-- 顶部通栏 --> <header class="header"> <button class="collapse-btn" id="menuToggle" title="菜单">☰</button> <div class="logo">⚡ 极简后台</div> <div class="avatar">U</div> </header> <!-- 左侧菜单 --> <aside class="sidebar" id="sidebar"> <div class="menu-item active"> <span class="icon">📊</span><span class="label">仪表盘</span> </div> <div class="menu-item"> <span class="icon">👥</span><span class="label">用户</span> </div> <div class="menu-item"> <span class="icon">📦</span><span class="label">产品</span> </div> <div class="menu-item"> <span class="icon">📈</span><span class="label">分析</span> </div> <div class="menu-item"> <span class="icon">⚙️</span><span class="label">设置</span> </div> </aside> <!-- 右侧内容区 --> <main class="main"> <!-- 标签栏 --> <div class="tab-bar"> <span class="tab active">概览</span> <span class="tab">用户列表</span> <span class="tab">订单管理</span> </div> <!-- 工具栏 --> <div class="toolbar"> <button style="padding: 4px 12px">＋ 新建</button> <button style="padding: 4px 12px">↻ 刷新</button> <span class="spacer"></span> <input type="text" placeholder="搜索..." style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px" /> </div> <!-- 主内容：弹性卡片 + 表格 --> <div class="content-body"> <div class="card-grid"> <div class="card"> <h3>总用户</h3> <div class="value">12,846</div> <small>较昨日 +12%</small> </div> <div class="card"> <h3>活跃用户</h3> <div class="value">3,279</div> <small>较昨日 +5%</small> </div> <div class="card"> <h3>今日访问</h3> <div class="value">9,432</div> <small>较昨日 +18%</small> </div> <div class="card"> <h3>消息</h3> <div class="value">1,205</div> <small>较昨日 -3%</small> </div> <div class="card"> <h3>收入</h3> <div class="value">¥ 56,200</div> <small>较昨日 +8%</small> </div> <div class="card"> <h3>订单</h3> <div class="value">847</div> <small>较昨日 +2%</small> </div> </div> <div class="table-wrapper"> <h3 style="margin-bottom: 12px">最新注册</h3> <table> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>角色</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>zhang@demo.com</td> <td>管理员</td> <td>✅ 在线</td> </tr> <tr> <td>李四</td> <td>li@demo.com</td> <td>编辑</td> <td>✅ 在线</td> </tr> <tr> <td>王五</td> <td>wang@demo.com</td> <td>用户</td> <td>⏸ 离线</td> </tr> </tbody> </table> </div> </div> </main> </div> <script> const layout = document.getElementById('layout') const menuToggle = document.getElementById('menuToggle') // 桌面端折叠/展开菜单（切换 collapsed 类） menuToggle.addEventListener('click', () => { if (window.innerWidth <= 768) { // 移动端：切换 drawer 打开/关闭 layout.classList.toggle('mobile-menu-open') } else { // 桌面端：切换侧边栏折叠 layout.classList.toggle('collapsed') } }) // 窗口大小变化时重置移动端状态 window.addEventListener('resize', () => { if (window.innerWidth > 768) { layout.classList.remove('mobile-menu-open') } }) // 菜单激活交互（简单演示） document.querySelectorAll('.menu-item').forEach((item) => { item.addEventListener('click', () => { document .querySelectorAll('.menu-item') .forEach((i) => i.classList.remove('active')) item.classList.add('active') // 移动端点击菜单后自动关闭 if (window.innerWidth <= 768) { layout.classList.remove('mobile-menu-open') } }) }) // 标签切换演示 document.querySelectorAll('.tab').forEach((tab) => { tab.addEventListener('click', () => { document .querySelectorAll('.tab') .forEach((t) => t.classList.remove('active')) tab.classList.add('active') }) }) </script> </body> </html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。