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/TopMenu.vue3.vue

@@ -1,31 +1,108 @@
 <template>
-  <div class="aa-topmenu">
-    <div class="aa-topmenu-item" v-for="(it, i) in items" :key="i"
-         :class="isActive(it) ? 'is-active' : ''" @click="select(it)">
-      <span>{{ it.label }}</span>
-      <span v-if="it.badge" class="aa-topmenu-badge">{{ it.badge }}</span>
-      <span v-if="it.children" class="aa-topmenu-caret">▾</span>
-      <div v-if="it.children" class="aa-topmenu-dropdown">
-        <a v-for="(s, si) in it.children" :key="si" class="aa-topmenu-sub"
-           :class="s.key === activeKey ? 'is-active' : ''" @click.stop="select(s)">{{ s.label }}</a>
+  <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>
+/* Aurora Admin Menu 族 · TopMenu（Vue 3）
+ * @generated by tools/gen-family-impl.mjs
+ * 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
+ * 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=top。
+ * 族参数取值：direction=top, indicator=top, collapsed=false
+ * 重跑生成：node tools/gen-family-impl.mjs nav-menu
+ */
+import { computed, ref } from 'vue';
+
+const FAMILY_DIRECTION = 'top';
+const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
+
 const props = defineProps({
   items: { type: Array, default: () => [] },
   activeKey: { type: String, default: '' }
 });
 const emit = defineEmits(['update:activeKey', 'change']);
 
-function isActive(it) {
-  if (it.key === props.activeKey) return true;
-  return (it.children || []).some(s => s.key === props.activeKey);
+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.children) emit('update:activeKey', it.key);
+  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>