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 个 —— 历史从未跟踪且属构建产物，保持现状。

site/sources/sidemenu/css.txt

@@ -1,34 +1,187 @@
-/* Aurora Admin SideMenu 样式 — 对齐 组件7.txt SideMenu：多级、图标、徽章、选中态#F0F5FF+左指示条、折叠 */
+/* 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-sidemenu { width: 220px; background: var(--au-color-card-bg); border-right: 1px solid var(--au-color-border); font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: var(--au-color-text-body); user-select: none; }
-.aa-sidemenu.collapsed { width: 56px; }
+/* ---------- 基础：方向无关 ---------- */
+.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; height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; color: var(--au-color-text-body); transition: background .15s, color .15s; }
+.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 { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-weight: 500; }
-.aa-menu-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--au-color-brand); }
+.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: 8px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
+.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-left: 40px; font-size: 13px; }
-.aa-menu-children .aa-menu-item.is-active::before { display: none; }
+.aa-menu-children .aa-menu-item { height: 40px; padding-inline-start: 40px; font-size: 13px; }
 
-/* 折叠模式 */
-.aa-sidemenu.collapsed .aa-menu-label,
-.aa-sidemenu.collapsed .aa-menu-badge,
-.aa-sidemenu.collapsed .aa-menu-arrow { display: none; }
-.aa-sidemenu.collapsed .aa-menu-item { justify-content: center; padding: 0; }
-.aa-sidemenu.collapsed .aa-menu-children { display: none; }
-
-/* 折叠态悬浮浮层 */
-.aa-menu-pop { position: absolute; left: 56px; top: 0; min-width: 180px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px 0; z-index: 200; }
+/* 折叠态悬浮浮层（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 { padding: 0 16px; }
-.aa-menu-pop .aa-menu-item::before { display: none; }
+.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; }

site/sources/sidemenu/html.txt

@@ -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>

site/sources/sidemenu/jsx.txt

@@ -1,90 +1,99 @@
 import React, { useState } from 'react';
 import './SideMenu.css';
 
-/**
- * Aurora Admin SideMenu（React）
- * 对齐 组件7.txt SideMenu 规范：多级、图标、徽章、选中态#F0F5FF+左指示条、折叠悬浮
- *
- * props:
- *  - value / defaultValue : 当前选中 key
- *  - items : [{ key, label, icon?, badge?, children?, disabled? }]
- *  - collapsed
- *  - onSelect(key)
+/* Aurora Admin Menu 族 · SideMenu（React）
+ * @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
  */
-export default function SideMenu({ value, defaultValue = '', items = [], collapsed = false, onSelect }) {
-  const [active, setActive] = useState(value !== undefined ? value : defaultValue);
-  const [openKeys, setOpenKeys] = useState([]);
-  const [hoverKey, setHoverKey] = useState('');
-  const [popTop, setPopTop] = useState(0);
-  const current = value !== undefined ? value : active;
+const FAMILY_DIRECTION = 'side';
+const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
 
-  const select = (key) => { if (value === undefined) setActive(key); onSelect && onSelect(key); setHoverKey(''); };
-  const onTopClick = (it) => {
+export default function SideMenu({ 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) {
-      if (collapsed) return;
-      setOpenKeys(openKeys.includes(it.key) ? openKeys.filter(k => k !== it.key) : [...openKeys, it.key]);
-    } else select(it.key);
-  };
-  const onHover = (it, e) => { if (collapsed && it.children) { setHoverKey(it.key); setPopTop(e.currentTarget.offsetTop); } };
-  const popItem = items.find(x => x.key === hoverKey) || null;
+      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-sidemenu${collapsed ? ' collapsed' : ''}`} onMouseLeave={() => setHoverKey('')}>
-      {items.map(it => {
-        const hasChild = it.children && it.children.length;
-        const isOpen = openKeys.includes(it.key);
-        return (
-          <div key={it.key}>
-            <div
-              className={`aa-menu-item${current === it.key ? ' is-active' : ''}${it.disabled ? ' is-disabled' : ''}${hasChild && isOpen ? ' is-open' : ''}`}
-              onClick={() => onTopClick(it)}
-              onMouseEnter={(e) => onHover(it, e)}
-            >
-              <span className="aa-menu-icon">{it.icon}</span>
-              <span className="aa-menu-label">{it.label}</span>
-              {it.badge && <span className="aa-menu-badge">{it.badge}</span>}
-              {hasChild && <span className="aa-menu-arrow">›</span>}
-            </div>
-            {hasChild && isOpen && !collapsed && (
-              <div className="aa-menu-children">
-                {it.children.map(c => (
-                  <div key={c.key} className={`aa-menu-item${current === c.key ? ' is-active' : ''}`} onClick={() => select(c.key)}>
-                    <span className="aa-menu-label">{c.label}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        );
-      })}
-
-      {collapsed && hoverKey && popItem && (
-        <div className="aa-menu-pop" style={{ top: popTop }}>
-          <div className="aa-menu-pop-title">{popItem.label}</div>
-          {popItem.children && popItem.children.length ? (
-            popItem.children.map(c => (
-              <div key={c.key} className={`aa-menu-item${current === c.key ? ' is-active' : ''}`} onClick={() => select(c.key)}>
-                <span className="aa-menu-label">{c.label}</span>
-              </div>
-            ))
-          ) : (
-            <div className="aa-menu-item is-active" onClick={() => select(popItem.key)}>
-              <span className="aa-menu-label">{popItem.label}</span>
-            </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>
   );
 }
-
-/*
-用法示例：
-import SideMenu from './SideMenu';
-const items = [
-  { key: 'dashboard', label: '仪表盘', icon: '▦' },
-  { key: 'user', label: '用户管理', icon: '◍', badge: 8, children: [{ key: 'list', label: '用户列表' }] }
-];
-<SideMenu items={items} defaultValue="list" collapsed={false} onSelect={setActive} />
-*/

site/sources/sidemenu/vue2.txt

@@ -1,95 +1,116 @@
 <template>
-  <div class="aa-sidemenu" :class="{ collapsed }" @mouseleave="hoverKey = ''">
-    <div
-      v-for="it in items" :key="it.key"
-      class="aa-menu-item"
-      :class="{ 'is-active': value === it.key, 'is-open': openKeys.indexOf(it.key) > -1, 'is-disabled': it.disabled }"
-      @click="onTopClick(it)"
-      @mouseenter="onHover(it, $event)"
-    >
-      <span 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="it.children && it.children.length" class="aa-menu-arrow">›</span>
+  <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>
 
-    <template v-for="it in items" :key="'c-' + it.key">
-      <div v-if="it.children && it.children.length && openKeys.indexOf(it.key) > -1 && !collapsed" class="aa-menu-children">
-        <div
-          v-for="c in it.children" :key="c.key"
-          class="aa-menu-item" :class="{ 'is-active': value === c.key }"
-          @click="select(c.key)"
-        >
-          <span class="aa-menu-label">{{ c.label }}</span>
+    <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="collapsed && hoverKey && popItem" class="aa-menu-pop" :style="{ top: popTop + 'px' }">
+    <div v-if="popItem" class="aa-menu-pop">
       <div class="aa-menu-pop-title">{{ popItem.label }}</div>
-      <template v-if="popItem.children && popItem.children.length">
-        <div
-          v-for="c in popItem.children" :key="c.key"
-          class="aa-menu-item" :class="{ 'is-active': value === c.key }"
-          @click="select(c.key)"
-        ><span class="aa-menu-label">{{ c.label }}</span></div>
-      </template>
-      <div v-else class="aa-menu-item is-active" @click="select(popItem.key)"><span class="aa-menu-label">{{ popItem.label }}</span></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>
-  </div>
+  </nav>
 </template>
 
 <script>
+/* Aurora Admin Menu 族 · SideMenu（Vue 2）
+ * @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
+ */
+var FAMILY_DIRECTION = 'side';
+var FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
+
 export default {
   name: 'AaSideMenu',
   props: {
-    value: { type: String, default: '' },              // 当前选中 key
-    items: { type: Array, required: true },            // [{ key, label, icon?, badge?, children?, disabled? }]
-    collapsed: { type: Boolean, default: false }
+    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
+    };
   },
-  data() { return { openKeys: [], hoverKey: '', popTop: 0 }; },
   computed: {
-    popItem() { return this.items.find(x => x.key === this.hoverKey) || null; }
+    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;
+    }
   },
   methods: {
-    onHover(it, e) { if (this.collapsed && it.children) { this.hoverKey = it.key; this.popTop = e.currentTarget.offsetTop; } },
-    onTopClick(it) {
-      if (it.disabled) return;
-      if (it.children && it.children.length) {
-        if (this.collapsed) return;
-        this.openKeys = this.openKeys.indexOf(it.key) > -1 ? this.openKeys.filter(k => k !== it.key) : [...this.openKeys, it.key];
-      } else { this.select(it.key); }
+    hasKids: function (it) {
+      return !!(it.children && it.children.length);
     },
-    select(key) { this.$emit('input', key); this.$emit('select', key); this.hoverKey = ''; }
+    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);
+    }
   }
 };
 </script>
 
-<!-- 样式对齐 组件7.txt SideMenu 规范 -->
-<style>
-.aa-sidemenu { width: 220px; background: #fff; border-right: 1px solid #E8ECF1; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; user-select: none; }
-.aa-sidemenu.collapsed { width: 56px; }
-.aa-menu-item { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; color: #262626; transition: background .15s, color .15s; }
-.aa-menu-item:hover { background: #F5F7FA; }
-.aa-menu-item.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }
-.aa-menu-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2F54EB; }
-.aa-menu-item.is-disabled { color: #BFBFBF; 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: #CF1322; color: #fff; font-size: 11px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
-.aa-menu-arrow { color: #6E6E6E; font-size: 12px; transition: transform .15s; }
-.aa-menu-item.is-open > .aa-menu-arrow { transform: rotate(90deg); }
-.aa-menu-children { background: #FAFAFA; }
-.aa-menu-children .aa-menu-item { height: 40px; padding-left: 40px; font-size: 13px; }
-.aa-menu-children .aa-menu-item.is-active::before { display: none; }
-.aa-sidemenu.collapsed .aa-menu-label,
-.aa-sidemenu.collapsed .aa-menu-badge,
-.aa-sidemenu.collapsed .aa-menu-arrow { display: none; }
-.aa-sidemenu.collapsed .aa-menu-item { justify-content: center; padding: 0; }
-.aa-sidemenu.collapsed .aa-menu-children { display: none; }
-.aa-menu-pop { position: absolute; left: 56px; top: 0; min-width: 180px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px 0; z-index: 200; }
-.aa-menu-pop-title { padding: 6px 16px; font-size: 12px; color: #6E6E6E; }
-.aa-menu-pop .aa-menu-item { padding: 0 16px; }
-.aa-menu-pop .aa-menu-item::before { display: none; }
-</style>
+<style src="./SideMenu.css"></style>

site/sources/sidemenu/vue3.txt

@@ -1,104 +1,110 @@
 <template>
-  <div class="aa-sidemenu" :class="{ collapsed }" @mouseleave="hoverKey = ''">
-    <div
-      v-for="it in items" :key="it.key"
-      class="aa-menu-item"
-      :class="{ 'is-active': modelValue === it.key, 'is-open': openKeys.includes(it.key), 'is-disabled': it.disabled }"
-      @click="onTopClick(it)"
-      @mouseenter="onHover(it, $event)"
-    >
-      <span 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="it.children && it.children.length" class="aa-menu-arrow">›</span>
+  <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>
 
-    <template v-for="it in items" :key="'c-' + it.key">
-      <div v-if="it.children && it.children.length && openKeys.includes(it.key) && !collapsed" class="aa-menu-children">
-        <div
-          v-for="c in it.children" :key="c.key"
-          class="aa-menu-item" :class="{ 'is-active': modelValue === c.key }"
-          @click="select(c.key)"
-        >
-          <span class="aa-menu-label">{{ c.label }}</span>
+    <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="collapsed && hoverKey && popItem" class="aa-menu-pop" :style="{ top: popTop + 'px' }">
+    <div v-if="popItem" class="aa-menu-pop">
       <div class="aa-menu-pop-title">{{ popItem.label }}</div>
-      <template v-if="popItem.children && popItem.children.length">
-        <div
-          v-for="c in popItem.children" :key="c.key"
-          class="aa-menu-item" :class="{ 'is-active': modelValue === c.key }"
-          @click="select(c.key)"
-        ><span class="aa-menu-label">{{ c.label }}</span></div>
-      </template>
-      <div v-else class="aa-menu-item is-active" @click="select(popItem.key)"><span class="aa-menu-label">{{ popItem.label }}</span></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>
-  </div>
+  </nav>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+/* Aurora Admin Menu 族 · SideMenu（Vue 3）
+ * @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
+ */
+import { computed, ref } from 'vue';
+
+const FAMILY_DIRECTION = 'side';
+const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
 
 const props = defineProps({
-  modelValue: { type: String, default: '' },     // 当前选中 key
-  items: { type: Array, required: true },         // [{ key, label, icon?, badge?, children?, disabled? }]
-  collapsed: { type: Boolean, default: false }
+  items: { type: Array, default: () => [] },
+  activeKey: { type: String, default: '' }
 });
-const emit = defineEmits(['update:modelValue', 'select']);
+const emit = defineEmits(['update:activeKey', 'change']);
 
-const openKeys = ref([]);
-const hoverKey = ref('');
-const popItem = computed(() => props.items.find(x => x.key === hoverKey.value) || null);
-const popTop = ref(0);
+const params = FAMILY_PARAMS;
+const active = ref(props.activeKey);
+const open = ref('');
+const collapsed = ref(params.collapsed === true);
 
-function onHover(it, e) {
-  if (props.collapsed && it.children) { hoverKey.value = it.key; popTop.value = e.currentTarget.offsetTop; }
+const collapsedAttr = computed(() =>
+  params.direction === 'side' ? String(collapsed.value) : undefined
+);
+
+function hasKids(it) {
+  return !!(it.children && it.children.length);
 }
-function onTopClick(it) {
+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 (it.children && it.children.length) {
-    if (props.collapsed) return;
-    openKeys.value = openKeys.value.includes(it.key) ? openKeys.value.filter(k => k !== it.key) : [...openKeys.value, it.key];
-  } else {
-    select(it.key);
+  if (hasKids(it)) {
+    open.value = open.value === it.key ? '' : it.key;
+    if (params.direction === 'mixed') active.value = it.key;
+    return;
   }
-}
-function select(key) {
-  emit('update:modelValue', key);
-  emit('select', key);
-  hoverKey.value = '';
+  active.value = it.key;
+  emit('update:activeKey', it.key);
+  emit('change', it.key);
 }
 </script>
 
-<!-- 样式对齐 组件7.txt SideMenu 规范 -->
-<style scoped>
-.aa-sidemenu { width: 220px; background: #fff; border-right: 1px solid #E8ECF1; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; user-select: none; }
-.aa-sidemenu.collapsed { width: 56px; }
-.aa-menu-item { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; color: #262626; transition: background .15s, color .15s; }
-.aa-menu-item:hover { background: #F5F7FA; }
-.aa-menu-item.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }
-.aa-menu-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2F54EB; }
-.aa-menu-item.is-disabled { color: #BFBFBF; 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: #CF1322; color: #fff; font-size: 11px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
-.aa-menu-arrow { color: #6E6E6E; font-size: 12px; transition: transform .15s; }
-.aa-menu-item.is-open > .aa-menu-arrow { transform: rotate(90deg); }
-.aa-menu-children { background: #FAFAFA; }
-.aa-menu-children .aa-menu-item { height: 40px; padding-left: 40px; font-size: 13px; }
-.aa-menu-children .aa-menu-item.is-active::before { display: none; }
-.aa-sidemenu.collapsed .aa-menu-label,
-.aa-sidemenu.collapsed .aa-menu-badge,
-.aa-sidemenu.collapsed .aa-menu-arrow { display: none; }
-.aa-sidemenu.collapsed .aa-menu-item { justify-content: center; padding: 0; }
-.aa-sidemenu.collapsed .aa-menu-children { display: none; }
-.aa-menu-pop { position: absolute; left: 56px; top: 0; min-width: 180px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px 0; z-index: 200; }
-.aa-menu-pop-title { padding: 6px 16px; font-size: 12px; color: #6E6E6E; }
-.aa-menu-pop .aa-menu-item { padding: 0 16px; }
-.aa-menu-pop .aa-menu-item::before { display: none; }
-</style>
+<style src="./SideMenu.css"></style>