Files
shanxia2.0/docs/demos/menu-layout-horizontal/index.html
T
2026-07-22 21:26:33 +08:00

930 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>菜单布局方案对比 · 横向导航 Demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
:root {
--primary: #10b981;
--primary-dark: #059669;
--primary-bg: #ecfdf5;
--portal-green: #1ca851;
--text: #1e293b;
--text-muted: #64748b;
--border: #d9e8e2;
--bg-page: #f8fafc;
--surface: #ffffff;
--table-head: #f8fafc;
--row-alt: #fafafa;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
--radius: 10px;
--content-padding: 24px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: #eef2f0;
}
/* —— 选择器壳 —— */
.picker {
position: sticky;
top: 0;
z-index: 100;
background: #0f172a;
color: #e2e8f0;
border-bottom: 1px solid #1e293b;
padding: 12px 20px 14px;
}
.picker-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 16px;
margin-bottom: 10px;
}
.picker-head h1 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #f8fafc;
}
.picker-head p {
margin: 0;
font-size: 12px;
color: #94a3b8;
}
.picker-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.picker-tab {
appearance: none;
border: 1px solid #334155;
background: #1e293b;
color: #cbd5e1;
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-align: left;
max-width: 220px;
}
.picker-tab:hover { border-color: #64748b; color: #f1f5f9; }
.picker-tab.is-active {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.picker-tab strong {
display: block;
font-size: 12px;
margin-bottom: 2px;
}
.picker-tab span {
display: block;
font-size: 11px;
opacity: 0.85;
font-weight: 400;
line-height: 1.35;
}
.picker-note {
margin: 10px 0 0;
font-size: 12px;
color: #94a3b8;
max-width: 960px;
}
.picker-note b { color: #e2e8f0; font-weight: 600; }
.stage {
padding: 16px;
max-width: 1280px;
margin: 0 auto;
}
.frame {
background: var(--bg-page);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
min-height: 620px;
display: none;
}
.frame.is-active { display: flex; flex-direction: column; }
/* 共用 mock UI */
.mock-content { flex: 1; padding: var(--content-padding); min-width: 0; }
.mock-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.mock-panel-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.mock-panel-top h2 {
margin: 0;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.mock-panel-top h2::before {
content: "";
width: 3px;
height: 14px;
border-radius: 2px;
background: var(--primary);
}
.mock-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
color: var(--text-muted);
}
.btn {
appearance: none;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 8px;
height: 32px;
padding: 0 12px;
font-size: 13px;
cursor: default;
}
.btn-main {
background: var(--primary);
border-color: var(--primary);
color: #fff;
font-weight: 600;
}
.mock-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mock-table th {
text-align: left;
background: var(--table-head);
color: var(--text-muted);
font-weight: 600;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.mock-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.mock-table tr:nth-child(even) td { background: var(--row-alt); }
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 600;
}
.space-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-muted);
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 6px;
padding: 4px 8px;
}
.space-badge em {
font-style: normal;
font-weight: 700;
color: #c2410c;
}
.user-chip {
display: flex;
align-items: center;
gap: 8px;
color: inherit;
font-size: 13px;
white-space: nowrap;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.35);
}
.avatar.dark {
background: var(--primary-bg);
border-color: var(--border);
}
/* ========== A: 现状门户 ========== */
.a-header {
height: 56px;
background: var(--portal-green);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
gap: 12px;
}
.a-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 15px;
flex-shrink: 0;
}
.a-logo {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.2);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
}
.a-modules {
display: flex;
gap: 6px;
flex: 1;
min-width: 0;
overflow: hidden;
}
.a-mod {
appearance: none;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.12);
color: #fff;
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
white-space: nowrap;
cursor: pointer;
}
.a-mod.is-active {
background: #fff;
color: var(--portal-green);
border-color: #fff;
font-weight: 600;
}
.a-body { display: flex; flex: 1; min-height: 0; }
.a-side {
width: 220px;
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 16px 12px;
}
.a-side .group-title {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
padding: 8px 12px;
letter-spacing: 0.02em;
}
.a-side a {
display: block;
padding: 8px 12px;
margin: 2px 0;
border-radius: 8px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.a-side a:hover { background: var(--row-alt); color: var(--text); }
.a-side a.active {
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 600;
}
.width-callout {
margin: 12px;
padding: 8px 10px;
border-radius: 8px;
border: 1px dashed #fdba74;
background: #fffbeb;
font-size: 11px;
color: #9a3412;
line-height: 1.4;
}
/* ========== B: 纯顶栏横向 + 下拉 ========== */
.b-top {
height: 56px;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 20px;
gap: 16px;
}
.b-brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 15px;
flex-shrink: 0;
color: var(--text);
}
.b-brand span { color: var(--primary); }
.b-nav {
display: flex;
align-items: stretch;
gap: 2px;
flex: 1;
min-width: 0;
height: 100%;
}
.b-item {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.b-link {
appearance: none;
border: 0;
background: transparent;
padding: 0 14px;
height: 100%;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
border-bottom: 2px solid transparent;
}
.b-link:hover { color: var(--text); background: var(--row-alt); }
.b-item.is-active > .b-link {
color: var(--primary-dark);
font-weight: 600;
border-bottom-color: var(--primary);
}
.b-drop {
display: none;
position: absolute;
top: calc(100% - 2px);
left: 0;
min-width: 180px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
padding: 6px;
z-index: 20;
}
.b-item:hover .b-drop,
.b-item:focus-within .b-drop { display: block; }
.b-drop a {
display: block;
padding: 8px 12px;
border-radius: 8px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
}
.b-drop a:hover,
.b-drop a.active {
background: var(--primary-bg);
color: var(--primary-dark);
}
.b-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
color: var(--text);
}
/* ========== C: 双层顶栏 ========== */
.c-l1 {
height: 48px;
background: var(--portal-green);
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
gap: 16px;
}
.c-l1 .b-brand { color: #fff; }
.c-l1 .b-brand span { color: #d1fae5; }
.c-l1-nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.c-l1-btn {
appearance: none;
border: 0;
background: transparent;
color: rgba(255,255,255,0.85);
padding: 6px 12px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
}
.c-l1-btn.is-active,
.c-l1-btn:hover {
background: rgba(255,255,255,0.18);
color: #fff;
font-weight: 600;
}
.c-l2 {
height: 44px;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 20px;
gap: 4px;
overflow-x: auto;
}
.c-l2 a {
text-decoration: none;
color: var(--text-muted);
font-size: 13px;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
font-weight: 500;
}
.c-l2 a:hover { background: var(--row-alt); color: var(--text); }
.c-l2 a.active {
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 600;
}
/* ========== D: Mega Menu ========== */
.d-mega {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: min(720px, calc(100vw - 48px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
padding: 16px;
z-index: 30;
grid-template-columns: repeat(3, 1fr);
gap: 12px 20px;
}
.d-item { position: relative; height: 100%; display: flex; align-items: center; }
.d-item:hover .d-mega,
.d-item:focus-within .d-mega { display: grid; }
.d-col h4 {
margin: 0 0 8px;
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
letter-spacing: 0.02em;
}
.d-col a {
display: block;
padding: 6px 8px;
margin: 0 -8px;
border-radius: 6px;
color: var(--text);
text-decoration: none;
font-size: 13px;
}
.d-col a:hover { background: var(--primary-bg); color: var(--primary-dark); }
.d-col a.active {
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 600;
}
/* ========== E: 顶栏一级 + 窄侧栏二级 ========== */
.e-body { display: flex; flex: 1; min-height: 0; }
.e-side {
width: 160px;
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 12px 8px;
}
.e-side a {
display: block;
padding: 8px 10px;
margin: 2px 0;
border-radius: 8px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
}
.e-side a:hover { background: var(--row-alt); color: var(--text); }
.e-side a.active {
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 600;
}
.gain-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.gain-pill {
font-size: 11px;
padding: 4px 8px;
border-radius: 6px;
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 600;
border: 1px solid #a7f3d0;
}
.gain-pill.warn {
background: #fff7ed;
color: #c2410c;
border-color: #fed7aa;
}
</style>
</head>
<body>
<div class="picker">
<div class="picker-head">
<h1>web-admin 菜单布局方案对比</h1>
<p>Fresh Mint Token · 仅 Demo,未改产品代码 · 点击下方切换</p>
</div>
<div class="picker-tabs" role="tablist">
<button type="button" class="picker-tab is-active" data-demo="a" role="tab">
<strong>A · 现状(门户)</strong>
<span>顶栏模块卡 + 左侧 220px 子菜单</span>
</button>
<button type="button" class="picker-tab" data-demo="b" role="tab">
<strong>B · 纯顶栏下拉</strong>
<span>一级横排,二级 Hover 下拉</span>
</button>
<button type="button" class="picker-tab" data-demo="c" role="tab">
<strong>C · 双层顶栏</strong>
<span>一级绿条 + 二级白条,无侧栏</span>
</button>
<button type="button" class="picker-tab" data-demo="d" role="tab">
<strong>D · Mega 面板</strong>
<span>一级横排 + 大面板分组二级</span>
</button>
<button type="button" class="picker-tab" data-demo="e" role="tab">
<strong>E · 顶栏+窄侧栏</strong>
<span>一级上移,侧栏缩至 160px</span>
</button>
</div>
<p class="picker-note" id="demoNote">
<b>A 现状:</b>客户感知「左侧占空间」主要来自当前 PORTAL 布局的固定侧栏(约 220–270px)。内容区被横向压缩,宽表/操作列更容易出现横向滚动。
</p>
</div>
<div class="stage">
<!-- A -->
<div class="frame is-active" id="demo-a" data-label="A">
<header class="a-header">
<div class="a-brand"><div class="a-logo">SX</div>山峡一体化门户</div>
<div class="a-modules">
<button type="button" class="a-mod is-active">CRM</button>
<button type="button" class="a-mod">细胞存储</button>
<button type="button" class="a-mod">报销</button>
<button type="button" class="a-mod">系统管理</button>
<button type="button" class="a-mod">Demo</button>
</div>
<div class="user-chip"><div class="avatar"></div>管理员</div>
</header>
<div class="a-body">
<aside class="a-side">
<div class="group-title">客户与商机</div>
<a href="#" class="active">客户管理</a>
<a href="#">商机跟进</a>
<a href="#">合同管理</a>
<div class="group-title">商品</div>
<a href="#">商品列表</a>
<a href="#">分类管理</a>
<div class="width-callout">侧栏常宽 ≈ 220–270px<br />宽屏列表少约 1/6~1/5 可用宽度</div>
</aside>
<div class="mock-content">
<div class="gain-bar">
<span class="gain-pill warn">内容区最窄 · 基线对照</span>
<span class="space-badge">侧栏占用 <em>≈220px</em> 固定宽度</span>
</div>
<div class="mock-panel">
<div class="mock-panel-top"><h2>客户列表</h2></div>
<div class="mock-toolbar">
<span>已选 0 项</span>
<button type="button" class="btn btn-main">新增</button>
<button type="button" class="btn">导出</button>
</div>
<table class="mock-table">
<thead><tr><th>客户名称</th><th>区域</th><th>状态</th><th>更新时间</th></tr></thead>
<tbody>
<tr><td>华东生物科技</td><td>上海 / 浦东</td><td><span class="tag">合作中</span></td><td>2026-07-18</td></tr>
<tr><td>三峡医械</td><td>湖北 / 宜昌</td><td><span class="tag">合作中</span></td><td>2026-07-17</td></tr>
<tr><td>绿源检测</td><td>江苏 / 苏州</td><td><span class="tag">跟进中</span></td><td>2026-07-16</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- B -->
<div class="frame" id="demo-b" data-label="B">
<header class="b-top">
<div class="b-brand">山峡<span>门户</span></div>
<nav class="b-nav" aria-label="主导航">
<div class="b-item is-active">
<button type="button" class="b-link">CRM ▾</button>
<div class="b-drop">
<a href="#" class="active">客户管理</a>
<a href="#">商机跟进</a>
<a href="#">合同管理</a>
<a href="#">商品列表</a>
<a href="#">分类管理</a>
</div>
</div>
<div class="b-item">
<button type="button" class="b-link">细胞存储 ▾</button>
<div class="b-drop">
<a href="#">样本接收</a>
<a href="#">质检工单</a>
<a href="#">协议管理</a>
</div>
</div>
<div class="b-item">
<button type="button" class="b-link">报销 ▾</button>
<div class="b-drop">
<a href="#">我的报销</a>
<a href="#">待审批</a>
<a href="#">借款申请</a>
</div>
</div>
<div class="b-item">
<button type="button" class="b-link">系统管理 ▾</button>
<div class="b-drop">
<a href="#">用户</a>
<a href="#">角色</a>
<a href="#">菜单</a>
<a href="#">租户</a>
</div>
</div>
<div class="b-item">
<button type="button" class="b-link">Demo ▾</button>
<div class="b-drop">
<a href="#">工作台</a>
<a href="#">标准列表</a>
<a href="#">订单列表</a>
</div>
</div>
</nav>
<div class="b-actions">
<div class="user-chip"><div class="avatar dark"></div>管理员</div>
</div>
</header>
<div class="mock-content">
<div class="gain-bar">
<span class="gain-pill">释放全部侧栏宽度 · 内容区最宽</span>
<span class="space-badge">侧栏占用 <em>0px</em></span>
</div>
<div class="mock-panel">
<div class="mock-panel-top"><h2>客户列表</h2></div>
<div class="mock-toolbar">
<span>已选 0 项</span>
<button type="button" class="btn btn-main">新增</button>
<button type="button" class="btn">导出</button>
</div>
<table class="mock-table">
<thead><tr><th>客户名称</th><th>区域</th><th>联系人</th><th>状态</th><th>更新时间</th></tr></thead>
<tbody>
<tr><td>华东生物科技</td><td>上海 / 浦东</td><td>王敏</td><td><span class="tag">合作中</span></td><td>2026-07-18</td></tr>
<tr><td>三峡医械</td><td>湖北 / 宜昌</td><td>李强</td><td><span class="tag">合作中</span></td><td>2026-07-17</td></tr>
<tr><td>绿源检测</td><td>江苏 / 苏州</td><td>陈洁</td><td><span class="tag">跟进中</span></td><td>2026-07-16</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- C -->
<div class="frame" id="demo-c" data-label="C">
<header class="c-l1">
<div class="b-brand">山峡<span>门户</span></div>
<nav class="c-l1-nav">
<button type="button" class="c-l1-btn is-active">CRM</button>
<button type="button" class="c-l1-btn">细胞存储</button>
<button type="button" class="c-l1-btn">报销</button>
<button type="button" class="c-l1-btn">系统管理</button>
<button type="button" class="c-l1-btn">Demo</button>
</nav>
<div class="user-chip"><div class="avatar"></div>管理员</div>
</header>
<nav class="c-l2" aria-label="二级导航">
<a href="#" class="active">客户管理</a>
<a href="#">商机跟进</a>
<a href="#">合同管理</a>
<a href="#">商品列表</a>
<a href="#">分类管理</a>
</nav>
<div class="mock-content">
<div class="gain-bar">
<span class="gain-pill">无侧栏 · 二级始终可见(无需 Hover)</span>
<span class="space-badge">额外顶栏高度 <em>+44px</em>,宽度全释放</span>
</div>
<div class="mock-panel">
<div class="mock-panel-top"><h2>客户列表</h2></div>
<div class="mock-toolbar">
<span>已选 0 项</span>
<button type="button" class="btn btn-main">新增</button>
<button type="button" class="btn">导出</button>
</div>
<table class="mock-table">
<thead><tr><th>客户名称</th><th>区域</th><th>联系人</th><th>状态</th><th>更新时间</th></tr></thead>
<tbody>
<tr><td>华东生物科技</td><td>上海 / 浦东</td><td>王敏</td><td><span class="tag">合作中</span></td><td>2026-07-18</td></tr>
<tr><td>三峡医械</td><td>湖北 / 宜昌</td><td>李强</td><td><span class="tag">合作中</span></td><td>2026-07-17</td></tr>
<tr><td>绿源检测</td><td>江苏 / 苏州</td><td>陈洁</td><td><span class="tag">跟进中</span></td><td>2026-07-16</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- D -->
<div class="frame" id="demo-d" data-label="D">
<header class="b-top">
<div class="b-brand">山峡<span>门户</span></div>
<nav class="b-nav">
<div class="d-item">
<button type="button" class="b-link" style="border-bottom-color:var(--primary);color:var(--primary-dark);font-weight:600">CRM ▾</button>
<div class="d-mega">
<div class="d-col">
<h4>客户与商机</h4>
<a href="#" class="active">客户管理</a>
<a href="#">商机跟进</a>
<a href="#">合同管理</a>
</div>
<div class="d-col">
<h4>商品主数据</h4>
<a href="#">商品列表</a>
<a href="#">分类管理</a>
<a href="#">单位管理</a>
</div>
<div class="d-col">
<h4>分析</h4>
<a href="#">销售看板</a>
<a href="#">区域报表</a>
</div>
</div>
</div>
<div class="d-item">
<button type="button" class="b-link">细胞存储 ▾</button>
<div class="d-mega">
<div class="d-col">
<h4>样本</h4>
<a href="#">样本接收</a>
<a href="#">质检工单</a>
</div>
<div class="d-col">
<h4>协议</h4>
<a href="#">协议管理</a>
<a href="#">归档查询</a>
</div>
<div class="d-col">
<h4>其他</h4>
<a href="#">库存概览</a>
</div>
</div>
</div>
<div class="d-item"><button type="button" class="b-link">报销 ▾</button></div>
<div class="d-item"><button type="button" class="b-link">系统管理 ▾</button></div>
<div class="d-item"><button type="button" class="b-link">Demo ▾</button></div>
</nav>
<div class="b-actions">
<div class="user-chip"><div class="avatar dark"></div>管理员</div>
</div>
</header>
<div class="mock-content">
<div class="gain-bar">
<span class="gain-pill">适合二级很多、需分组浏览的模块</span>
<span class="space-badge">侧栏 <em>0px</em> · Hover「CRM」查看大面板</span>
</div>
<div class="mock-panel">
<div class="mock-panel-top"><h2>客户列表</h2></div>
<div class="mock-toolbar">
<span>已选 0 项</span>
<button type="button" class="btn btn-main">新增</button>
<button type="button" class="btn">导出</button>
</div>
<table class="mock-table">
<thead><tr><th>客户名称</th><th>区域</th><th>联系人</th><th>状态</th><th>更新时间</th></tr></thead>
<tbody>
<tr><td>华东生物科技</td><td>上海 / 浦东</td><td>王敏</td><td><span class="tag">合作中</span></td><td>2026-07-18</td></tr>
<tr><td>三峡医械</td><td>湖北 / 宜昌</td><td>李强</td><td><span class="tag">合作中</span></td><td>2026-07-17</td></tr>
<tr><td>绿源检测</td><td>江苏 / 苏州</td><td>陈洁</td><td><span class="tag">跟进中</span></td><td>2026-07-16</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- E -->
<div class="frame" id="demo-e" data-label="E">
<header class="c-l1">
<div class="b-brand">山峡<span>门户</span></div>
<nav class="c-l1-nav">
<button type="button" class="c-l1-btn is-active">CRM</button>
<button type="button" class="c-l1-btn">细胞存储</button>
<button type="button" class="c-l1-btn">报销</button>
<button type="button" class="c-l1-btn">系统管理</button>
<button type="button" class="c-l1-btn">Demo</button>
</nav>
<div class="user-chip"><div class="avatar"></div>管理员</div>
</header>
<div class="e-body">
<aside class="e-side">
<a href="#" class="active">客户管理</a>
<a href="#">商机跟进</a>
<a href="#">合同管理</a>
<a href="#">商品列表</a>
<a href="#">分类管理</a>
<div class="width-callout" style="margin:10px 4px">窄侧栏 160px<br />比现状约省 60–110px</div>
</aside>
<div class="mock-content">
<div class="gain-bar">
<span class="gain-pill">折中:一级上移,二级仍常驻可见</span>
<span class="space-badge">侧栏 <em>160px</em>(可再折叠)</span>
</div>
<div class="mock-panel">
<div class="mock-panel-top"><h2>客户列表</h2></div>
<div class="mock-toolbar">
<span>已选 0 项</span>
<button type="button" class="btn btn-main">新增</button>
<button type="button" class="btn">导出</button>
</div>
<table class="mock-table">
<thead><tr><th>客户名称</th><th>区域</th><th>状态</th><th>更新时间</th></tr></thead>
<tbody>
<tr><td>华东生物科技</td><td>上海 / 浦东</td><td><span class="tag">合作中</span></td><td>2026-07-18</td></tr>
<tr><td>三峡医械</td><td>湖北 / 宜昌</td><td><span class="tag">合作中</span></td><td>2026-07-17</td></tr>
<tr><td>绿源检测</td><td>江苏 / 苏州</td><td><span class="tag">跟进中</span></td><td>2026-07-16</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
const notes = {
a: '<b>A 现状(PORTAL):</b>顶栏选模块 + 左侧展示该模块子菜单。与当前 web-admin 默认布局最接近。客户说的「占空间」主要指这条固定侧栏。',
b: '<b>B 纯顶栏下拉:</b>内容区最宽,实现成本相对低(工程里已有 ArtHorizontalMenu / MenuTypeEnum.TOP)。风险:二级依赖 Hover,触控/键盘可达性与「同模块内频繁切换」体验偏弱;一级过多时会挤到省略号。',
c: '<b>C 双层顶栏:</b>推荐优先给客户看。无侧栏占宽,二级始终可见、单击即达,适合 B 端「在同一模块内反复切页面」。代价是垂直方向多约 44px。',
d: '<b>D Mega 面板:</b>适合二级菜单很多、需要分组的模块。信息密度高,但交互更重,移动端/窄屏要另做适配。',
e: '<b>E 顶栏 + 窄侧栏:</b>接近现状 PORTAL / TOP_LEFT 思路,只是把一级从侧栏挪到顶栏并收窄。改动小、风险低,但空间收益有限。'
};
const tabs = document.querySelectorAll('.picker-tab');
const frames = document.querySelectorAll('.frame');
const noteEl = document.getElementById('demoNote');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const id = tab.getAttribute('data-demo');
tabs.forEach((t) => t.classList.toggle('is-active', t === tab));
frames.forEach((f) => f.classList.toggle('is-active', f.id === 'demo-' + id));
noteEl.innerHTML = notes[id] || '';
});
});
</script>
</body>
</html>