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 个 —— 历史从未跟踪且属构建产物，保持现状。
2026-09-20 03:32:31 +08:00
parent 7e3d442dab
commit eb25feedaf
372 changed files with 16928 additions and 12810 deletions
@@ -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} />
-*/