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

frameworks/SideMenu.vue3.vue

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