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
+146
-97
@@ -1,112 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aurora Admin · SideMenu (H5)</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
|
||||
<link rel="stylesheet" href="./SideMenu.css">
|
||||
<style>
|
||||
.demo { display: flex; gap: 24px; padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }
|
||||
h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }
|
||||
.sub { color: var(--au-color-text-secondary); margin: 0 0 16px; font-size: 12px; }
|
||||
.col { background: var(--au-color-card-bg); border-radius: 8px; padding: 16px; }
|
||||
.toggle { margin-bottom: 12px; font-size: 13px; color: var(--au-color-brand); cursor: pointer; user-select: none; }
|
||||
</style>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · SideMenu（侧边菜单，普通 H5）</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="SideMenu.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="demo">
|
||||
<div class="col">
|
||||
<h1>SideMenu</h1>
|
||||
<p class="sub">多级、图标、徽章、选中态+左指示条、折叠</p>
|
||||
<div class="toggle" id="toggle">⇥ 折叠 / 展开</div>
|
||||
<div class="aa-sidemenu" role="navigation" id="menu"></div>
|
||||
<!--
|
||||
Aurora Admin Menu 族 · SideMenu
|
||||
@generated by tools/gen-family-impl.mjs
|
||||
生成物 — 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
|
||||
族 nav-menu：本页是同一份 Menu 实现，参数 direction=side。
|
||||
族参数取值：direction=side, indicator=left, 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>
|
||||
|
||||
<script>
|
||||
const ITEMS = [
|
||||
{ key: 'dashboard', label: '仪表盘', icon: '▦' },
|
||||
{ key: 'content', label: '内容管理', icon: '▤', children: [{ key: 'article', label: '文章' }, { key: 'comment', label: '评论' }, { key: 'tag', label: '标签' }] },
|
||||
{ key: 'user', label: '用户管理', icon: '◍', badge: 8, children: [{ key: 'ulist', label: '用户列表' }, { key: 'role', label: '角色权限' }] },
|
||||
{ key: 'system', label: '系统设置', icon: '⚙', children: [{ key: 'config', label: '基础配置' }, { key: 'log', label: '操作日志' }] },
|
||||
{ key: 'help', label: '帮助中心', icon: '?', disabled: true }
|
||||
];
|
||||
<p>含徽章与禁用项</p>
|
||||
<div class="demo-block">
|
||||
<nav class="aa-menu" id="menu-badge" role="navigation" aria-label="带徽章的主菜单"></nav>
|
||||
</div>
|
||||
|
||||
const menu = document.getElementById('menu');
|
||||
let active = 'article';
|
||||
let openKeys = new Set(['content']);
|
||||
let collapsed = false;
|
||||
<p>折叠态（collapsed=true）</p>
|
||||
<div class="demo-block">
|
||||
<nav class="aa-menu" id="menu-alt" role="navigation" aria-label="主菜单替代形态"></nav>
|
||||
</div>
|
||||
|
||||
function render() {
|
||||
menu.classList.toggle('collapsed', collapsed);
|
||||
menu.innerHTML = '';
|
||||
ITEMS.forEach(it => {
|
||||
const hasChild = it.children && it.children.length;
|
||||
const isOpen = openKeys.has(it.key);
|
||||
const el = document.createElement('div');
|
||||
el.className = 'aa-menu-item' + (active === it.key ? ' is-active' : '') + (it.disabled ? ' is-disabled' : '') + (hasChild && isOpen ? ' is-open' : ''); el.setAttribute('role','menuitem'); el.setAttribute('tabindex','0');
|
||||
el.dataset.key = it.key;
|
||||
el.innerHTML = `<span class="aa-menu-icon">${it.icon || ''}</span>` +
|
||||
`<span class="aa-menu-label">${it.label}</span>` +
|
||||
(it.badge ? `<span class="aa-menu-badge">${it.badge}</span>` : '') +
|
||||
(hasChild ? `<span class="aa-menu-arrow">›</span>` : '');
|
||||
menu.appendChild(el);
|
||||
<script>
|
||||
(function () {
|
||||
/* 族参数：本组件在 nav-menu 族中的取值（由生成器写入，勿手改） */
|
||||
var FAMILY_DIRECTION = 'side';
|
||||
var PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
|
||||
|
||||
if (hasChild && isOpen && !collapsed) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'aa-menu-children';
|
||||
it.children.forEach(c => {
|
||||
const cEl = document.createElement('div');
|
||||
cEl.className = 'aa-menu-item' + (active === c.key ? ' is-active' : ''); cEl.setAttribute('role','menuitem'); cEl.setAttribute('tabindex','0');
|
||||
cEl.dataset.key = c.key;
|
||||
cEl.innerHTML = `<span class="aa-menu-label">${c.label}</span>`;
|
||||
wrap.appendChild(cEl);
|
||||
});
|
||||
menu.appendChild(wrap);
|
||||
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 }
|
||||
];
|
||||
|
||||
/* 单一实现对三种 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(); }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render();
|
||||
return { render: render, state: state };
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
menu.addEventListener('click', (e) => {
|
||||
const item = e.target.closest('.aa-menu-item');
|
||||
if (!item) return;
|
||||
const key = item.dataset.key;
|
||||
const it = ITEMS.find(x => x.key === key);
|
||||
if (it && it.disabled) return;
|
||||
if (it && it.children) {
|
||||
if (openKeys.has(key)) openKeys.delete(key); else openKeys.add(key);
|
||||
} else {
|
||||
active = key;
|
||||
}
|
||||
render();
|
||||
});
|
||||
var defaults = PARAMS;
|
||||
createMenu(document.getElementById('menu-default'), defaults, { active: 'order-all', open: '' });
|
||||
createMenu(document.getElementById('menu-badge'), defaults, { active: 'goods-list', open: 'goods' });
|
||||
|
||||
// 折叠态：悬浮顶层项弹出浮层
|
||||
let pop = null;
|
||||
menu.addEventListener('mouseover', (e) => {
|
||||
if (!collapsed) return;
|
||||
const item = e.target.closest('.aa-menu-item');
|
||||
if (!item || item.closest('.aa-menu-children')) return;
|
||||
const it = ITEMS.find(x => x.key === item.dataset.key);
|
||||
if (!it) return;
|
||||
if (pop) pop.remove();
|
||||
pop = document.createElement('div');
|
||||
pop.className = 'aa-menu-pop';
|
||||
pop.style.top = item.offsetTop + 'px';
|
||||
let html = `<div class="aa-menu-pop-title">${it.label}</div>`;
|
||||
if (it.children) it.children.forEach(c => {
|
||||
html += `<div class="aa-menu-item ${active === c.key ? 'is-active' : ''}" role="menuitem" tabindex="0" data-key="${c.key}"><span class="aa-menu-label">${c.label}</span></div>`;
|
||||
}); else {
|
||||
html += `<div class="aa-menu-item is-active" role="menuitem" tabindex="0" data-key="${it.key}"><span class="aa-menu-label">${it.label}</span></div>`;
|
||||
}
|
||||
pop.innerHTML = html;
|
||||
menu.appendChild(pop);
|
||||
});
|
||||
menu.addEventListener('mouseleave', () => { if (pop) { pop.remove(); pop = null; } });
|
||||
|
||||
document.getElementById('toggle').addEventListener('click', () => { collapsed = !collapsed; render(); });
|
||||
render();
|
||||
</script>
|
||||
/* 第三个用例展示本 direction 的差异能力 */
|
||||
var altParams = Object.assign({}, PARAMS, { collapsed: true });
|
||||
createMenu(document.getElementById('menu-alt'), altParams, { active: 'order-all', open: '' });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user