feat(S6-P21): 组件族参数化(13族/44成员/导航族15文件同源/79→48概念组件)
【本次核心 · S6-P21】 - 族层数据：families.json + 44 份契约注入 family/familyRole/familyParams； data.json / data.js / site/details 同步。13 族 / 44 成员 / 35 独立 → 概念组件 79→48。 - 79 个 slug 全保留、集合逐一不变（铁律 5 对外承诺未破）；frameworks 仍 395 文件、薄壳仍 79。 - 归族判据为契约中可核对字段（semanticTypeCandidates 重叠 / anatomy 为同一骨架子集 / 变体维度同构 / doNotInvent 显式从属声明），每族 mergeBasis 写明依据，不按名字猜。 - 实现层合并（导航族端到端切片）：tools/gen-family-impl.mjs 从 5 端模板生成 TopMenu / SideMenu / MixedNavigation 共 15 文件，参数 direction=top|side|mixed； 三份 CSS md5 完全相同 = 一份样式表服务三个组件。 - 新增 tools/gen-families.mjs、tools/gen-family-impl.mjs、tools/verify-families.mjs、 tools/lib/family-model.mjs、tools/lib/family-impl/nav-menu/*.tpl。 【同时清掉此前已完成但未提交的批次】 生成物（data.json / data.js / site/sources / site/components 薄壳 / sitemap.xml / tests 报告） 跨阶段交织，无法拆成互相自洽的多个提交，故按既有批量风格合并提交： - Package：三端可 import（S5-P18）+ 发布到私有 npm 源 - Docs site：导航语言改下拉（S5-P19）、详情页代码块默认展开、中英切换完整性 - Security：生产部署链审计修复（2026-09-19）+ 线上部署 - Theme modes 日间/夜间/自动；S1-P4 data.js 瘦身；S2-P5 暗色；S2-P6 跨端一致性； S2-P7 行为断言；S2-P9 FAQ；S3-P8 RTL；S3-P9 契约缺口解释层；S4-P12 发布流程 - 补入 tools/pack-deploy.mjs、run-site-smoke.mjs、verify-*.mjs，.dockerignore、 安全审计修复与待决策项.md 【验收】 - node tools/verify-families.mjs → OK: 族层端到端一致（13 族 / 44 成员 / 79 组件不变 / 395 文件不变） - node tools/verify-cross-platform.mjs → 79/79 identical（HEAD 基线 high 44） - node tools/run-regression.mjs → 100%（79/79 页，1017/1017 断言，N/A 34），连跑 8 次一致，0 超时 - 逐页实测：topmenu / sidemenu / mixednavigation 各 13/13，帧内 direction 参数正确，0 JS 错误 - 零运行时依赖 OK；build-site.ps1 ASCII-only OK 【未纳入】site/components/<slug>/ 平台薄壳 316 个 —— 历史从未跟踪且属构建产物，保持现状。
This commit is contained in:
aurora-admin
@@ -1,13 +1,187 @@
|
||||
/* Aurora Admin MixedNavigation 样式 — 顶部一级 + 侧边二级混合导航 */
|
||||
.aa-mixed { font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); }
|
||||
.aa-mixed-top { display: flex; gap: 4px; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); padding: 0 8px; }
|
||||
.aa-mixed-topitem { padding: 12px 16px; cursor: pointer; color: var(--au-color-text-body); font-size: 14px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
|
||||
.aa-mixed-topitem:hover { color: var(--au-color-brand); }
|
||||
.aa-mixed-topitem.is-active { color: var(--au-color-brand); border-bottom-color: var(--au-color-brand); font-weight: 600; }
|
||||
.aa-mixed-body { display: flex; min-height: 240px; }
|
||||
.aa-mixed-side { width: 168px; background: var(--au-color-table-header-bg); border-right: 1px solid var(--au-color-border); padding: 8px 0; }
|
||||
.aa-mixed-sideitem { padding: 10px 16px; cursor: pointer; color: var(--au-color-text-body); font-size: 14px; border-left: 3px solid transparent; transition: background .15s, color .15s; }
|
||||
.aa-mixed-sideitem:hover { background: var(--au-color-page-bg); }
|
||||
.aa-mixed-sideitem.is-active { background: var(--au-color-brand-bg); color: var(--au-color-brand); border-left-color: var(--au-color-brand); font-weight: 500; }
|
||||
.aa-mixed-content { flex: 1; padding: 18px 22px; color: var(--au-color-text-tertiary); font-size: 14px; line-height: 1.7; }
|
||||
.aa-mixed-content h4 { margin: 0 0 6px; color: var(--au-color-text-title); }
|
||||
/* Aurora Admin Menu 族样式 — 由 tools/gen-family-impl.mjs 从族模板生成，勿手改。
|
||||
*
|
||||
* @generated by tools/gen-family-impl.mjs
|
||||
* 族：nav-menu（基座 Menu + direction 参数）。
|
||||
* 本文件服务：sidemenu / topmenu / mixednavigation。
|
||||
*
|
||||
* 三个组件的 CSS 是同一份样式表 —— 差异全部由根元素的 data-direction /
|
||||
* data-collapsed 参数表达，不再各自手写一遍。改样式请改模板后重跑生成器：
|
||||
* node tools/gen-family-impl.mjs nav-menu
|
||||
*/
|
||||
|
||||
/* ---------- 基础：方向无关 ---------- */
|
||||
.aa-menu {
|
||||
font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
|
||||
color: var(--au-color-text-body);
|
||||
background: var(--au-color-card-bg);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.aa-menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--au-color-text-body);
|
||||
transition: background .15s, color .15s, border-color .15s;
|
||||
}
|
||||
.aa-menu-item:hover { background: var(--au-color-page-bg); }
|
||||
.aa-menu-item.is-active { color: var(--au-color-brand); font-weight: 500; }
|
||||
.aa-menu-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }
|
||||
.aa-menu-item.is-disabled:hover { background: none; }
|
||||
|
||||
.aa-menu-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 15px; }
|
||||
.aa-menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.aa-menu-badge {
|
||||
background: var(--au-color-error);
|
||||
color: var(--au-color-text-inverse);
|
||||
font-size: 11px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: var(--au-radius-large);
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.aa-menu-arrow { color: var(--au-color-text-secondary); font-size: 12px; transition: transform .15s; }
|
||||
.aa-menu-item.is-open > .aa-menu-arrow { transform: rotate(90deg); }
|
||||
|
||||
.aa-menu-children { background: var(--au-color-table-header-bg); }
|
||||
.aa-menu-children .aa-menu-item { height: 40px; padding-inline-start: 40px; font-size: 13px; }
|
||||
|
||||
/* 折叠态悬浮浮层（side 方向专用） */
|
||||
.aa-menu-pop {
|
||||
position: absolute;
|
||||
inset-inline-start: 56px;
|
||||
top: 0;
|
||||
min-width: 180px;
|
||||
background: var(--au-color-card-bg);
|
||||
border: 1px solid var(--au-color-border);
|
||||
border-radius: var(--au-radius-medium);
|
||||
box-shadow: var(--au-shadow-medium, 0 4px 12px rgba(0, 0, 0, .12));
|
||||
padding: 4px 0;
|
||||
z-index: 200;
|
||||
}
|
||||
.aa-menu-pop-title { padding: 6px 16px; font-size: 12px; color: var(--au-color-text-secondary); }
|
||||
.aa-menu-pop .aa-menu-item { height: 40px; padding: 0 16px; }
|
||||
|
||||
/* ---------- direction=top：水平导航，选中态底部指示条 ---------- */
|
||||
.aa-menu[data-direction="top"] {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid var(--au-color-border);
|
||||
padding: 0 8px;
|
||||
}
|
||||
.aa-menu[data-direction="top"] > .aa-menu-item { height: 48px; padding: 0 16px; }
|
||||
.aa-menu[data-direction="top"] > .aa-menu-item:hover { background: none; color: var(--au-color-brand); }
|
||||
.aa-menu[data-direction="top"] > .aa-menu-item.is-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline: 12px;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background: var(--au-color-brand);
|
||||
}
|
||||
/* top 方向的下拉：绝对定位面板，hover / focus-within 展开（键盘同样可达） */
|
||||
.aa-menu[data-direction="top"] .aa-menu-children {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
inset-inline-start: 0;
|
||||
display: none;
|
||||
min-width: 160px;
|
||||
background: var(--au-color-card-bg);
|
||||
border: 1px solid var(--au-color-border);
|
||||
border-radius: var(--au-radius-medium);
|
||||
box-shadow: var(--au-shadow-medium, 0 4px 12px rgba(0, 0, 0, .08));
|
||||
padding: 4px;
|
||||
z-index: 50;
|
||||
}
|
||||
.aa-menu[data-direction="top"] .aa-menu-item:hover > .aa-menu-children,
|
||||
.aa-menu[data-direction="top"] .aa-menu-item:focus-within > .aa-menu-children { display: block; }
|
||||
.aa-menu[data-direction="top"] .aa-menu-children .aa-menu-item {
|
||||
height: auto;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
border-radius: var(--au-radius-small);
|
||||
}
|
||||
.aa-menu[data-direction="top"] .aa-menu-children .aa-menu-item:hover {
|
||||
background: var(--au-color-brand-bg);
|
||||
color: var(--au-color-brand);
|
||||
}
|
||||
.aa-menu[data-direction="top"] .aa-menu-children .aa-menu-item.is-active {
|
||||
background: var(--au-color-brand-bg);
|
||||
}
|
||||
|
||||
/* ---------- direction=side：侧边栏，选中态品牌底 + 侧指示条 ---------- */
|
||||
.aa-menu[data-direction="side"] {
|
||||
width: 220px;
|
||||
border-inline-end: 1px solid var(--au-color-border);
|
||||
}
|
||||
.aa-menu[data-direction="side"] > .aa-menu-item { height: 44px; padding: 0 16px; }
|
||||
.aa-menu[data-direction="side"] > .aa-menu-item.is-active { background: var(--au-color-brand-bg); }
|
||||
.aa-menu[data-direction="side"] > .aa-menu-item.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: var(--au-color-brand);
|
||||
}
|
||||
|
||||
/* ---------- direction=mixed：顶部一级 + 侧边二级 ---------- */
|
||||
.aa-menu[data-direction="mixed"] {
|
||||
border: 1px solid var(--au-color-border);
|
||||
border-radius: var(--au-radius-large);
|
||||
overflow: hidden;
|
||||
}
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-top {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-bottom: 1px solid var(--au-color-border);
|
||||
padding: 0 8px;
|
||||
}
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-top > .aa-menu-item { height: 48px; padding: 0 16px; }
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-top > .aa-menu-item:hover { background: none; }
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-top > .aa-menu-item.is-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline: 12px;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background: var(--au-color-brand);
|
||||
}
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-side {
|
||||
width: 168px;
|
||||
min-height: 200px;
|
||||
background: var(--au-color-table-header-bg);
|
||||
border-inline-end: 1px solid var(--au-color-border);
|
||||
padding: 8px 0;
|
||||
}
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-side > .aa-menu-item { height: 40px; padding: 0 16px; }
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-side > .aa-menu-item.is-active {
|
||||
background: var(--au-color-brand-bg);
|
||||
}
|
||||
.aa-menu[data-direction="mixed"] > .aa-menu-side > .aa-menu-item.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: var(--au-color-brand);
|
||||
}
|
||||
|
||||
/* ---------- 参数：collapsed（仅 side 方向生效） ---------- */
|
||||
.aa-menu[data-direction="side"][data-collapsed="true"] { width: 56px; }
|
||||
.aa-menu[data-direction="side"][data-collapsed="true"] .aa-menu-label,
|
||||
.aa-menu[data-direction="side"][data-collapsed="true"] .aa-menu-badge,
|
||||
.aa-menu[data-direction="side"][data-collapsed="true"] .aa-menu-arrow { display: none; }
|
||||
.aa-menu[data-direction="side"][data-collapsed="true"] > .aa-menu-item { justify-content: center; padding: 0; }
|
||||
.aa-menu[data-direction="side"][data-collapsed="true"] > .aa-menu-item.is-active::before { display: none; }
|
||||
|
||||
/* 嵌套 children 的层级缩进（side 方向展开时） */
|
||||
.aa-menu[data-direction="side"] > .aa-menu-item > .aa-menu-children .aa-menu-item.is-active::before { display: none; }
|
||||
|
||||
@@ -3,61 +3,159 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · MixedNavigation</title>
|
||||
<title>Aurora Admin · MixedNavigation（混合导航，普通 H5）</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="./MixedNavigation.css" />
|
||||
<link rel="stylesheet" href="MixedNavigation.css" />
|
||||
<style>
|
||||
body { margin: 0; padding: 16px; background: var(--au-color-page-bg); }
|
||||
p { font-size: 13px; color: var(--au-color-text-secondary); margin: 0 0 8px; }
|
||||
.demo-block { margin-bottom: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="aa-page">
|
||||
<h2 class="aa-h2">MixedNavigation 混合导航</h2>
|
||||
<p class="aa-desc">顶部一级菜单 + 侧边栏二级菜单，切换顶部项时侧边栏内容联动变化。</p>
|
||||
<!--
|
||||
Aurora Admin Menu 族 · MixedNavigation
|
||||
@generated by tools/gen-family-impl.mjs
|
||||
生成物 — 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
|
||||
族 nav-menu：本页是同一份 Menu 实现，参数 direction=mixed。
|
||||
族参数取值：direction=mixed, level=2, collapsed=false
|
||||
重跑生成：node tools/gen-family-impl.mjs nav-menu
|
||||
-->
|
||||
<p>默认态（选中：全部订单）</p>
|
||||
<div class="demo-block">
|
||||
<nav class="aa-menu" id="menu-default" role="navigation" aria-label="主菜单"></nav>
|
||||
</div>
|
||||
|
||||
<div class="aa-demo">
|
||||
<div class="aa-mixed" id="mixed">
|
||||
<div class="aa-mixed-top" id="top"></div>
|
||||
<div class="aa-mixed-body">
|
||||
<div class="aa-mixed-side" id="side"></div>
|
||||
<div class="aa-mixed-content" id="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>含徽章与禁用项</p>
|
||||
<div class="demo-block">
|
||||
<nav class="aa-menu" id="menu-badge" role="navigation" aria-label="带徽章的主菜单"></nav>
|
||||
</div>
|
||||
|
||||
<p>二级联动（一级切到「商品」）</p>
|
||||
<div class="demo-block">
|
||||
<nav class="aa-menu" id="menu-alt" role="navigation" aria-label="主菜单替代形态"></nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var menu = [
|
||||
{ name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },
|
||||
{ name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },
|
||||
{ name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }
|
||||
(function () {
|
||||
/* 族参数：本组件在 nav-menu 族中的取值（由生成器写入，勿手改） */
|
||||
var FAMILY_DIRECTION = 'mixed';
|
||||
var PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
|
||||
|
||||
var ITEMS = [
|
||||
{ key: 'home', label: '工作台', icon: '⊞' },
|
||||
{ key: 'order', label: '订单', icon: '≡', badge: '3', children: [
|
||||
{ key: 'order-all', label: '全部订单' },
|
||||
{ key: 'order-ship', label: '待发货' },
|
||||
{ key: 'order-refund', label: '退款' }
|
||||
] },
|
||||
{ key: 'goods', label: '商品', icon: '◇', children: [
|
||||
{ key: 'goods-list', label: '商品列表' },
|
||||
{ key: 'goods-cat', label: '分类管理' }
|
||||
] },
|
||||
{ key: 'data', label: '数据', icon: '▤' },
|
||||
{ key: 'setting', label: '设置', icon: '⚙', disabled: true }
|
||||
];
|
||||
var topIdx = 0, sideIdx = 0;
|
||||
var topEl = document.getElementById('top');
|
||||
var sideEl = document.getElementById('side');
|
||||
var contentEl = document.getElementById('content');
|
||||
|
||||
menu.forEach(function (m, i) {
|
||||
var b = document.createElement('div');
|
||||
b.className = 'aa-mixed-topitem' + (i === 0 ? ' is-active' : ''); b.setAttribute('role','menuitem'); b.setAttribute('tabindex','0');
|
||||
b.textContent = m.name;
|
||||
b.onclick = function () { topIdx = i; sideIdx = 0; render(); };
|
||||
topEl.appendChild(b);
|
||||
});
|
||||
/* 单一实现对三种 direction 通用：
|
||||
top -> 一级水平排布，children 走下拉面板
|
||||
side -> 一级纵向排布，children 内联展开（collapsed 时走悬浮浮层）
|
||||
mixed -> 一级在顶部，二级为当前一级的 children，纵向排在侧栏 */
|
||||
function createMenu(root, params, initial) {
|
||||
var state = {
|
||||
active: (initial && initial.active) || '',
|
||||
open: (initial && initial.open) || '',
|
||||
collapsed: params.collapsed === true || params.collapsed === 'true',
|
||||
hoverKey: ''
|
||||
};
|
||||
|
||||
function isTopActive(it) {
|
||||
if (it.key === state.active) return true;
|
||||
return (it.children || []).some(function (c) { return c.key === state.active; });
|
||||
}
|
||||
|
||||
function itemHtml(it, level) {
|
||||
var active = it.key === state.active ? ' is-active' : '';
|
||||
var disabled = it.disabled ? ' is-disabled' : '';
|
||||
var hasKids = !!(it.children && it.children.length);
|
||||
var open = hasKids && it.key === state.open ? ' is-open' : '';
|
||||
var kids = hasKids && params.direction !== 'mixed'
|
||||
? '<div class="aa-menu-children">' + it.children.map(function (c) { return itemHtml(c, level + 1); }).join('') + '</div>'
|
||||
: '';
|
||||
var icon = it.icon ? '<span class="aa-menu-icon">' + it.icon + '</span>' : '';
|
||||
var badge = it.badge ? '<span class="aa-menu-badge">' + it.badge + '</span>' : '';
|
||||
var arrow = hasKids && params.direction !== 'top'
|
||||
? '<span class="aa-menu-arrow">›</span>'
|
||||
: '';
|
||||
return '<div class="aa-menu-item' + active + disabled + open + '"' +
|
||||
' role="menuitem" tabindex="0" data-key="' + it.key + '"' +
|
||||
(hasKids ? ' aria-expanded="' + (it.key === state.open ? 'true' : 'false') + '"' : '') +
|
||||
'>' + icon + '<span class="aa-menu-label">' + it.label + '</span>' + badge + arrow + kids + '</div>';
|
||||
}
|
||||
|
||||
function popHtml() {
|
||||
if (params.direction !== 'side' || !state.collapsed || !state.hoverKey) return '';
|
||||
var it = ITEMS.filter(function (x) { return x.key === state.hoverKey; })[0];
|
||||
if (!it || !it.children) return '';
|
||||
return '<div class="aa-menu-pop">' +
|
||||
'<div class="aa-menu-pop-title">' + it.label + '</div>' +
|
||||
it.children.map(function (c) { return itemHtml(c, 1); }).join('') +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function bodyHtml() {
|
||||
if (params.direction !== 'mixed') {
|
||||
return ITEMS.map(function (it) { return itemHtml(it, 0); }).join('');
|
||||
}
|
||||
var current = ITEMS.filter(function (x) { return isTopActive(x); })[0] || ITEMS[0];
|
||||
var side = (current.children || []).map(function (c) { return itemHtml(c, 1); }).join('');
|
||||
return '<div class="aa-menu-top">' +
|
||||
ITEMS.map(function (it) { return itemHtml(it, 0); }).join('') +
|
||||
'</div>' +
|
||||
'<div class="aa-menu-side">' + side + '</div>';
|
||||
}
|
||||
|
||||
function render() {
|
||||
root.setAttribute('data-direction', params.direction);
|
||||
if (params.direction === 'side') {
|
||||
root.setAttribute('data-collapsed', state.collapsed ? 'true' : 'false');
|
||||
}
|
||||
root.innerHTML = bodyHtml() + popHtml();
|
||||
Array.prototype.forEach.call(root.querySelectorAll('[data-key]'), function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
var key = el.getAttribute('data-key');
|
||||
var isParent = ITEMS.some(function (it) { return it.key === key && it.children; });
|
||||
if (isParent) {
|
||||
state.open = state.open === key ? '' : key;
|
||||
if (params.direction === 'mixed') state.active = key;
|
||||
} else {
|
||||
state.active = key;
|
||||
}
|
||||
render();
|
||||
});
|
||||
el.addEventListener('mouseenter', function () {
|
||||
state.hoverKey = el.getAttribute('data-key');
|
||||
if (params.direction === 'side' && state.collapsed) render();
|
||||
});
|
||||
el.addEventListener('mouseleave', function () {
|
||||
if (params.direction === 'side' && state.collapsed) { state.hoverKey = ''; render(); }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
Array.prototype.forEach.call(topEl.children, function (c, i) { c.classList.toggle('is-active', i === topIdx); });
|
||||
var cur = menu[topIdx];
|
||||
sideEl.innerHTML = cur.items.map(function (it, i) {
|
||||
return '<div class="aa-mixed-sideitem' + (i === sideIdx ? ' is-active' : '') + '" role="menuitem" tabindex="0" data-i="' + i + '">' + it.name + '</div>';
|
||||
}).join('');
|
||||
var item = cur.items[sideIdx];
|
||||
contentEl.innerHTML = '<h4>' + cur.name + ' / ' + item.name + '</h4><div>' + item.desc + '</div>';
|
||||
}
|
||||
sideEl.addEventListener('click', function (e) {
|
||||
var t = e.target.closest('.aa-mixed-sideitem');
|
||||
if (!t) return;
|
||||
sideIdx = parseInt(t.dataset.i, 10);
|
||||
render();
|
||||
});
|
||||
render();
|
||||
return { render: render, state: state };
|
||||
}
|
||||
|
||||
var defaults = PARAMS;
|
||||
createMenu(document.getElementById('menu-default'), defaults, { active: 'order-all', open: '' });
|
||||
createMenu(document.getElementById('menu-badge'), defaults, { active: 'goods-list', open: 'goods' });
|
||||
|
||||
/* 第三个用例展示本 direction 的差异能力 */
|
||||
var altParams = Object.assign({}, PARAMS, { });
|
||||
createMenu(document.getElementById('menu-alt'), altParams, { active: 'goods-list', open: '' });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,52 +1,99 @@
|
||||
import React, { useState } from 'react';
|
||||
import './MixedNavigation.css';
|
||||
|
||||
const DEFAULT_MENU = [
|
||||
{ name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },
|
||||
{ name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },
|
||||
{ name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }
|
||||
];
|
||||
/* Aurora Admin Menu 族 · MixedNavigation（React）
|
||||
* @generated by tools/gen-family-impl.mjs
|
||||
* 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
|
||||
* 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=mixed。
|
||||
* 族参数取值：direction=mixed, level=2, collapsed=false
|
||||
* 重跑生成：node tools/gen-family-impl.mjs nav-menu
|
||||
*/
|
||||
const FAMILY_DIRECTION = 'mixed';
|
||||
const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
|
||||
|
||||
export default function MixedNavigation({ menu = DEFAULT_MENU }) {
|
||||
const [topIdx, setTopIdx] = useState(0);
|
||||
const [sideIdx, setSideIdx] = useState(0);
|
||||
const cur = menu[topIdx];
|
||||
export default function MixedNavigation({ items = [], activeKey = '', onChange }) {
|
||||
const [active, setActive] = useState(activeKey);
|
||||
const [open, setOpen] = useState('');
|
||||
const [hoverKey, setHoverKey] = useState('');
|
||||
const [collapsed, setCollapsed] = useState(FAMILY_PARAMS.collapsed === true);
|
||||
|
||||
const params = FAMILY_PARAMS;
|
||||
const isTopActive = (it) => it.key === active || (it.children || []).some((c) => c.key === active);
|
||||
|
||||
function select(it) {
|
||||
if (it.disabled) return;
|
||||
if (it.children && it.children.length) {
|
||||
setOpen(open === it.key ? '' : it.key);
|
||||
if (params.direction === 'mixed') setActive(it.key);
|
||||
return;
|
||||
}
|
||||
setActive(it.key);
|
||||
onChange && onChange(it.key);
|
||||
}
|
||||
|
||||
function renderItem(it) {
|
||||
const hasKids = !!(it.children && it.children.length);
|
||||
return (
|
||||
<div
|
||||
key={it.key}
|
||||
className={
|
||||
'aa-menu-item' +
|
||||
(it.key === active ? ' is-active' : '') +
|
||||
(it.disabled ? ' is-disabled' : '') +
|
||||
(hasKids && it.key === open ? ' is-open' : '')
|
||||
}
|
||||
role="menuitem"
|
||||
tabIndex={0}
|
||||
aria-expanded={hasKids ? (it.key === open ? 'true' : 'false') : undefined}
|
||||
onClick={() => select(it)}
|
||||
onMouseEnter={() => params.direction === 'side' && setHoverKey(it.key)}
|
||||
onMouseLeave={() => {
|
||||
if (params.direction === 'side') setHoverKey('');
|
||||
}}
|
||||
>
|
||||
{it.icon ? <span className="aa-menu-icon">{it.icon}</span> : null}
|
||||
<span className="aa-menu-label">{it.label}</span>
|
||||
{it.badge ? <span className="aa-menu-badge">{it.badge}</span> : null}
|
||||
{hasKids && params.direction !== 'top' ? <span className="aa-menu-arrow">{'\u203A'}</span> : null}
|
||||
{hasKids && params.direction !== 'mixed' ? (
|
||||
<div className="aa-menu-children">{it.children.map((c) => renderItem(c))}</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderPop() {
|
||||
if (params.direction !== 'side' || !collapsed || !hoverKey) return null;
|
||||
const it = items.filter((x) => x.key === hoverKey)[0];
|
||||
if (!it || !it.children) return null;
|
||||
return (
|
||||
<div className="aa-menu-pop">
|
||||
<div className="aa-menu-pop-title">{it.label}</div>
|
||||
{it.children.map((c) => renderItem(c))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderBody() {
|
||||
if (params.direction !== 'mixed') return items.map((it) => renderItem(it));
|
||||
const current = items.filter((x) => isTopActive(x))[0] || items[0] || { children: [] };
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="aa-menu-top">{items.map((it) => renderItem(it))}</div>
|
||||
<div className="aa-menu-side">{(current.children || []).map((c) => renderItem(c))}</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="aa-mixed">
|
||||
<div className="aa-mixed-top">
|
||||
{menu.map((m, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={'aa-mixed-topitem' + (topIdx === i ? ' is-active' : '')}
|
||||
onClick={() => {
|
||||
setTopIdx(i);
|
||||
setSideIdx(0);
|
||||
}}
|
||||
>
|
||||
{m.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="aa-mixed-body">
|
||||
<div className="aa-mixed-side">
|
||||
{cur.items.map((it, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={'aa-mixed-sideitem' + (sideIdx === i ? ' is-active' : '')}
|
||||
onClick={() => setSideIdx(i)}
|
||||
>
|
||||
{it.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="aa-mixed-content">
|
||||
<h4>
|
||||
{cur.name} / {cur.items[sideIdx].name}
|
||||
</h4>
|
||||
<div>{cur.items[sideIdx].desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
className="aa-menu"
|
||||
data-direction={params.direction}
|
||||
data-collapsed={params.direction === 'side' ? (collapsed ? 'true' : 'false') : undefined}
|
||||
aria-label="主菜单"
|
||||
>
|
||||
{renderBody()}
|
||||
{renderPop()}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,52 +1,113 @@
|
||||
<template>
|
||||
<div class="aa-mixed">
|
||||
<div class="aa-mixed-top">
|
||||
<div
|
||||
v-for="(m, i) in menu"
|
||||
:key="i"
|
||||
class="aa-mixed-topitem"
|
||||
:class="{ 'is-active': topIdx === i }"
|
||||
@click="selectTop(i)"
|
||||
>{{ m.name }}</div>
|
||||
</div>
|
||||
<div class="aa-mixed-body">
|
||||
<div class="aa-mixed-side">
|
||||
<div
|
||||
v-for="(it, i) in menu[topIdx].items"
|
||||
:key="i"
|
||||
class="aa-mixed-sideitem"
|
||||
:class="{ 'is-active': sideIdx === i }"
|
||||
@click="sideIdx = i"
|
||||
>{{ it.name }}</div>
|
||||
</div>
|
||||
<div class="aa-mixed-content">
|
||||
<h4>{{ menu[topIdx].name }} / {{ menu[topIdx].items[sideIdx].name }}</h4>
|
||||
<div>{{ menu[topIdx].items[sideIdx].desc }}</div>
|
||||
<nav class="aa-menu" :data-direction="params.direction" :data-collapsed="collapsedAttr" aria-label="主菜单">
|
||||
<div v-if="params.direction === 'mixed'" class="aa-menu-top">
|
||||
<div v-for="it in items" :key="it.key" class="aa-menu-item" :class="itemClass(it)"
|
||||
role="menuitem" tabindex="0" @click="select(it)">
|
||||
<span v-if="it.icon" class="aa-menu-icon">{{ it.icon }}</span>
|
||||
<span class="aa-menu-label">{{ it.label }}</span>
|
||||
<span v-if="it.badge" class="aa-menu-badge">{{ it.badge }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="params.direction === 'mixed'" class="aa-menu-side">
|
||||
<div v-for="it in sideItems" :key="it.key" class="aa-menu-item" :class="itemClass(it)"
|
||||
role="menuitem" tabindex="0" @click="select(it)">
|
||||
<span class="aa-menu-label">{{ it.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="params.direction !== 'mixed'">
|
||||
<div v-for="it in items" :key="it.key" class="aa-menu-item" :class="itemClass(it)"
|
||||
role="menuitem" tabindex="0" :aria-expanded="hasKids(it) ? String(open === it.key) : undefined"
|
||||
@click="select(it)">
|
||||
<span v-if="it.icon" class="aa-menu-icon">{{ it.icon }}</span>
|
||||
<span class="aa-menu-label">{{ it.label }}</span>
|
||||
<span v-if="it.badge" class="aa-menu-badge">{{ it.badge }}</span>
|
||||
<span v-if="hasKids(it) && params.direction !== 'top'" class="aa-menu-arrow">›</span>
|
||||
<div v-if="hasKids(it) && params.direction !== 'mixed'" class="aa-menu-children">
|
||||
<div v-for="c in it.children" :key="c.key" class="aa-menu-item" :class="itemClass(c)"
|
||||
role="menuitem" tabindex="0" @click.stop="select(c)">
|
||||
<span class="aa-menu-label">{{ c.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="popItem" class="aa-menu-pop">
|
||||
<div class="aa-menu-pop-title">{{ popItem.label }}</div>
|
||||
<div v-for="c in popItem.children" :key="c.key" class="aa-menu-item" :class="itemClass(c)"
|
||||
role="menuitem" tabindex="0" @click="select(c)">
|
||||
<span class="aa-menu-label">{{ c.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* Aurora Admin Menu 族 · MixedNavigation（Vue 2）
|
||||
* @generated by tools/gen-family-impl.mjs
|
||||
* 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
|
||||
* 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=mixed。
|
||||
* 族参数取值：direction=mixed, level=2, collapsed=false
|
||||
* 重跑生成：node tools/gen-family-impl.mjs nav-menu
|
||||
*/
|
||||
var FAMILY_DIRECTION = 'mixed';
|
||||
var FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
|
||||
|
||||
export default {
|
||||
name: 'AaMixedNavigation',
|
||||
props: {
|
||||
menu: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },
|
||||
{ name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },
|
||||
{ name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }
|
||||
]
|
||||
items: { type: Array, default: function () { return []; } },
|
||||
activeKey: { type: String, default: '' }
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
params: FAMILY_PARAMS,
|
||||
active: this.activeKey,
|
||||
open: '',
|
||||
collapsed: FAMILY_PARAMS.collapsed === true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
collapsedAttr: function () {
|
||||
return this.params.direction === 'side' ? String(this.collapsed) : undefined;
|
||||
},
|
||||
sideItems: function () {
|
||||
var self = this;
|
||||
var current = this.items.filter(function (x) { return self.isTopActive(x); })[0] || this.items[0];
|
||||
return (current && current.children) || [];
|
||||
},
|
||||
popItem: function () {
|
||||
var self = this;
|
||||
if (this.params.direction !== 'side' || !this.collapsed) return null;
|
||||
return this.items.filter(function (x) { return x.key === self.open; })[0] || null;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return { topIdx: 0, sideIdx: 0 };
|
||||
},
|
||||
methods: {
|
||||
selectTop(i) {
|
||||
this.topIdx = i;
|
||||
this.sideIdx = 0;
|
||||
hasKids: function (it) {
|
||||
return !!(it.children && it.children.length);
|
||||
},
|
||||
isTopActive: function (it) {
|
||||
if (it.key === this.active) return true;
|
||||
return (it.children || []).some(function (c) { return c.key === this.active; }, this);
|
||||
},
|
||||
itemClass: function (it) {
|
||||
return [
|
||||
it.key === this.active ? 'is-active' : '',
|
||||
it.disabled ? 'is-disabled' : '',
|
||||
this.hasKids(it) && it.key === this.open ? 'is-open' : ''
|
||||
];
|
||||
},
|
||||
select: function (it) {
|
||||
if (it.disabled) return;
|
||||
if (this.hasKids(it)) {
|
||||
this.open = this.open === it.key ? '' : it.key;
|
||||
if (this.params.direction === 'mixed') this.active = it.key;
|
||||
return;
|
||||
}
|
||||
this.active = it.key;
|
||||
this.$emit('update:activeKey', it.key);
|
||||
this.$emit('change', it.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,50 +1,109 @@
|
||||
<template>
|
||||
<div class="aa-mixed">
|
||||
<div class="aa-mixed-top">
|
||||
<div
|
||||
v-for="(m, i) in menu"
|
||||
:key="i"
|
||||
class="aa-mixed-topitem"
|
||||
:class="{ 'is-active': topIdx === i }"
|
||||
@click="selectTop(i)"
|
||||
>{{ m.name }}</div>
|
||||
</div>
|
||||
<div class="aa-mixed-body">
|
||||
<div class="aa-mixed-side">
|
||||
<div
|
||||
v-for="(it, i) in menu[topIdx].items"
|
||||
:key="i"
|
||||
class="aa-mixed-sideitem"
|
||||
:class="{ 'is-active': sideIdx === i }"
|
||||
@click="sideIdx = i"
|
||||
>{{ it.name }}</div>
|
||||
</div>
|
||||
<div class="aa-mixed-content">
|
||||
<h4>{{ menu[topIdx].name }} / {{ menu[topIdx].items[sideIdx].name }}</h4>
|
||||
<div>{{ menu[topIdx].items[sideIdx].desc }}</div>
|
||||
<nav class="aa-menu" :data-direction="params.direction" :data-collapsed="collapsedAttr" aria-label="主菜单">
|
||||
<div v-if="params.direction === 'mixed'" class="aa-menu-top">
|
||||
<div v-for="it in items" :key="it.key" class="aa-menu-item" :class="itemClass(it)"
|
||||
role="menuitem" tabindex="0" @click="select(it)">
|
||||
<span v-if="it.icon" class="aa-menu-icon">{{ it.icon }}</span>
|
||||
<span class="aa-menu-label">{{ it.label }}</span>
|
||||
<span v-if="it.badge" class="aa-menu-badge">{{ it.badge }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="params.direction === 'mixed'" class="aa-menu-side">
|
||||
<div v-for="it in sideItems" :key="it.key" class="aa-menu-item" :class="itemClass(it)"
|
||||
role="menuitem" tabindex="0" @click="select(it)">
|
||||
<span class="aa-menu-label">{{ it.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="params.direction !== 'mixed'">
|
||||
<div v-for="it in items" :key="it.key" class="aa-menu-item" :class="itemClass(it)"
|
||||
role="menuitem" tabindex="0" :aria-expanded="hasKids(it) ? String(open === it.key) : undefined"
|
||||
@click="select(it)">
|
||||
<span v-if="it.icon" class="aa-menu-icon">{{ it.icon }}</span>
|
||||
<span class="aa-menu-label">{{ it.label }}</span>
|
||||
<span v-if="it.badge" class="aa-menu-badge">{{ it.badge }}</span>
|
||||
<span v-if="hasKids(it) && params.direction !== 'top'" class="aa-menu-arrow">›</span>
|
||||
<div v-if="hasKids(it) && params.direction !== 'mixed'" class="aa-menu-children">
|
||||
<div v-for="c in it.children" :key="c.key" class="aa-menu-item" :class="itemClass(c)"
|
||||
role="menuitem" tabindex="0" @click.stop="select(c)">
|
||||
<span class="aa-menu-label">{{ c.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="popItem" class="aa-menu-pop">
|
||||
<div class="aa-menu-pop-title">{{ popItem.label }}</div>
|
||||
<div v-for="c in popItem.children" :key="c.key" class="aa-menu-item" :class="itemClass(c)"
|
||||
role="menuitem" tabindex="0" @click="select(c)">
|
||||
<span class="aa-menu-label">{{ c.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
/* Aurora Admin Menu 族 · MixedNavigation（Vue 3）
|
||||
* @generated by tools/gen-family-impl.mjs
|
||||
* 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
|
||||
* 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=mixed。
|
||||
* 族参数取值：direction=mixed, level=2, collapsed=false
|
||||
* 重跑生成：node tools/gen-family-impl.mjs nav-menu
|
||||
*/
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const FAMILY_DIRECTION = 'mixed';
|
||||
const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
|
||||
|
||||
const props = defineProps({
|
||||
menu: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },
|
||||
{ name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },
|
||||
{ name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }
|
||||
]
|
||||
}
|
||||
items: { type: Array, default: () => [] },
|
||||
activeKey: { type: String, default: '' }
|
||||
});
|
||||
const topIdx = ref(0);
|
||||
const sideIdx = ref(0);
|
||||
function selectTop(i) {
|
||||
topIdx.value = i;
|
||||
sideIdx.value = 0;
|
||||
const emit = defineEmits(['update:activeKey', 'change']);
|
||||
|
||||
const params = FAMILY_PARAMS;
|
||||
const active = ref(props.activeKey);
|
||||
const open = ref('');
|
||||
const collapsed = ref(params.collapsed === true);
|
||||
|
||||
const collapsedAttr = computed(() =>
|
||||
params.direction === 'side' ? String(collapsed.value) : undefined
|
||||
);
|
||||
|
||||
function hasKids(it) {
|
||||
return !!(it.children && it.children.length);
|
||||
}
|
||||
function isTopActive(it) {
|
||||
if (it.key === active.value) return true;
|
||||
return (it.children || []).some((c) => c.key === active.value);
|
||||
}
|
||||
const sideItems = computed(() => {
|
||||
const current = props.items.filter((x) => isTopActive(x))[0] || props.items[0] || { children: [] };
|
||||
return current.children || [];
|
||||
});
|
||||
const popItem = computed(() => {
|
||||
if (params.direction !== 'side' || !collapsed.value) return null;
|
||||
return props.items.filter((x) => x.key === open.value)[0] || null;
|
||||
});
|
||||
|
||||
function itemClass(it) {
|
||||
return [
|
||||
it.key === active.value ? 'is-active' : '',
|
||||
it.disabled ? 'is-disabled' : '',
|
||||
hasKids(it) && it.key === open.value ? 'is-open' : ''
|
||||
];
|
||||
}
|
||||
function select(it) {
|
||||
if (it.disabled) return;
|
||||
if (hasKids(it)) {
|
||||
open.value = open.value === it.key ? '' : it.key;
|
||||
if (params.direction === 'mixed') active.value = it.key;
|
||||
return;
|
||||
}
|
||||
active.value = it.key;
|
||||
emit('update:activeKey', it.key);
|
||||
emit('change', it.key);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user