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.vue2.vue

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