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,13 +1,15 @@
-/* Aurora Admin ThemeSwitcher 样式 — 明暗主题 + 品牌色切换 */
+/* Aurora Admin ThemeSwitcher 样式 — 日间 / 夜间 / 自动 + 品牌色切换 */
 .aa-themesw { font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
 .aa-themesw-opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 8px 12px; cursor: pointer; color: var(--au-color-text-body); font-size: 13px; transition: border-color .15s, background .15s, color .15s; }
-.aa-themesw-opt:hover { border-color: #B7C4FF; }
+.aa-themesw-opt:hover, .aa-themesw-opt:focus-visible { border-color: var(--au-color-brand); outline: 2px solid var(--au-color-focus-ring); outline-offset: 1px; }
 .aa-themesw-opt.is-active { border-color: var(--au-color-brand); background: var(--au-color-brand-bg); color: var(--au-color-brand); }
 .aa-themesw-dot { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--au-color-border); }
 .aa-themesw-dot.dark { background: var(--au-color-tooltip-bg); }
 .aa-themesw-dot.light { background: var(--au-color-card-bg); }
-.aa-themesw-colors { display: flex; gap: 8px; margin-left: 4px; }
+.aa-themesw-dot.auto { background: var(--au-color-table-header-bg); }
+.aa-themesw-colors { display: flex; gap: 8px; margin-inline-start: 4px; }
 .aa-themesw-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .12s; }
 .aa-themesw-color:hover { transform: scale(1.1); }
 .aa-themesw-color.is-active { border-color: var(--au-color-tooltip-bg); }
+.aa-themesw-color:focus-visible { outline: 2px solid var(--au-color-focus-ring); outline-offset: 2px; }
 .aa-themesw-label { font-size: 12px; color: var(--au-color-text-secondary); width: 100%; margin-top: 4px; }
@@ -10,12 +10,13 @@
 <body>
  <div class="aa-page">
    <h2 class="aa-h2">ThemeSwitcher 主题切换</h2>
-    <p class="aa-desc">明暗主题 + 品牌色切换，实时预览，可保存偏好。</p>
+    <p class="aa-desc">日间 / 夜间 / 自动主题 + 品牌色切换，实时预览。</p>

    <div class="aa-demo">
-      <div class="aa-themesw" id="sw">
-        <div class="aa-themesw-opt" role="radio" tabindex="0" data-mode="light"><span class="aa-themesw-dot light"></span>浅色</div>
-        <div class="aa-themesw-opt" role="radio" tabindex="0" data-mode="dark"><span class="aa-themesw-dot dark"></span>深色</div>
+      <div class="aa-themesw" id="sw" role="radiogroup" aria-label="主题模式">
+        <div class="aa-themesw-opt" role="radio" aria-checked="false" tabindex="0" data-mode="light"><span class="aa-themesw-dot light"></span>日间</div>
+        <div class="aa-themesw-opt" role="radio" aria-checked="false" tabindex="0" data-mode="dark"><span class="aa-themesw-dot dark"></span>夜间</div>
+        <div class="aa-themesw-opt" role="radio" aria-checked="false" tabindex="0" data-mode="auto"><span class="aa-themesw-dot auto"></span>自动</div>
        <div class="aa-themesw-colors" id="colors"></div>
        <div class="aa-themesw-label" id="label"></div>
      </div>
@@ -31,22 +32,34 @@
  <script>
    var brands = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];
    var mode = 'light', brand = '#2F54EB';
+    var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    try { mode = localStorage.getItem('aa-mode') || 'light'; } catch (e) {}
+    if (mode !== 'light' && mode !== 'dark' && mode !== 'auto') mode = 'light';
    var colorsEl = document.getElementById('colors');
    brands.forEach(function (c) {
      var s = document.createElement('span');
-      s.className = 'aa-themesw-color'; s.setAttribute('role','radio'); s.setAttribute('tabindex','0'); s.style.background = c; s.dataset.c = c;
+      s.className = 'aa-themesw-color'; s.setAttribute('role','radio'); s.setAttribute('aria-label','品牌色 ' + c); s.setAttribute('aria-checked', 'false'); s.setAttribute('tabindex','0'); s.style.background = c; s.dataset.c = c;
      s.onclick = function () { brand = c; render(); };
+      s.onkeydown = function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); brand = c; render(); } };
      colorsEl.appendChild(s);
    });
    document.querySelectorAll('.aa-themesw-opt').forEach(function (o) {
-      o.onclick = function () { mode = o.dataset.mode; render(); };
+      o.onclick = function () { mode = o.dataset.mode; try { localStorage.setItem('aa-mode', mode); } catch (e) {} render(); };
+      o.onkeydown = function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); o.click(); } };
    });
+    function effective() { return mode === 'auto' && media ? (media.matches ? 'dark' : 'light') : mode; }
    function render() {
-      document.querySelectorAll('.aa-themesw-opt').forEach(function (o) { o.classList.toggle('is-active', o.dataset.mode === mode); });
-      Array.prototype.forEach.call(colorsEl.children, function (c) { c.classList.toggle('is-active', c.dataset.c === brand); });
-      document.documentElement.style.setProperty('--brand', brand);
-      document.getElementById('cur').textContent = mode === 'light' ? '浅色' : '深色';
-      document.getElementById('label').textContent = '品牌色：' + brand + '（点击色块可切换，应用于 CSS 变量 --brand 实时预览）';
+      var actual = effective();
+      document.documentElement.classList.toggle('aa-dark', actual === 'dark');
+      document.querySelectorAll('.aa-themesw-opt').forEach(function (o) { var active = o.dataset.mode === mode; o.classList.toggle('is-active', active); o.setAttribute('aria-checked', active ? 'true' : 'false'); });
+      Array.prototype.forEach.call(colorsEl.children, function (c) { c.classList.toggle('is-active', c.dataset.c === brand); c.setAttribute('aria-checked', c.dataset.c === brand ? 'true' : 'false'); });
+      document.documentElement.style.setProperty('--au-color-brand', brand);
+      document.getElementById('cur').textContent = mode === 'auto' ? '自动（当前：' + (actual === 'dark' ? '夜间' : '日间') + '）' : (actual === 'dark' ? '夜间' : '日间');
+      document.getElementById('label').textContent = '品牌色：' + brand + '（应用于 Aurora 品牌令牌实时预览）';
+    }
+    if (media) {
+      var onChange = function () { if (mode === 'auto') render(); };
+      if (media.addEventListener) media.addEventListener('change', onChange); else if (media.addListener) media.addListener(onChange);
    }
    render();
  </script>
@@ -2,18 +2,23 @@ import React from 'react';
 import './ThemeSwitcher.css';

 const MODES = [
-  { value: 'light', label: '浅色' },
-  { value: 'dark', label: '深色' }
+  { value: 'light', label: '日间' },
+  { value: 'dark', label: '夜间' },
+  { value: 'auto', label: '自动' }
 ];
 const BRANDS = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];

 export default function ThemeSwitcher({ mode = 'light', brand = '#2F54EB', onModeChange, onBrandChange }) {
  return (
-    <div className="aa-themesw">
+    <div className="aa-themesw" role="radiogroup" aria-label="主题模式">
      {MODES.map((m) => (
        <div
          key={m.value}
          className={'aa-themesw-opt' + (mode === m.value ? ' is-active' : '')}
+          role="radio"
+          aria-checked={mode === m.value}
+          tabIndex={0}
+          onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onModeChange && onModeChange(m.value)}
          onClick={() => onModeChange && onModeChange(m.value)}
        >
          <span className={'aa-themesw-dot ' + m.value} />
@@ -26,11 +31,16 @@ export default function ThemeSwitcher({ mode = 'light', brand = '#2F54EB', onMod
            key={c}
            className={'aa-themesw-color' + (brand === c ? ' is-active' : '')}
            style={{ background: c }}
+            role="radio"
+            aria-label={`品牌色 ${c}`}
+            aria-checked={brand === c}
+            tabIndex={0}
+            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onBrandChange && onBrandChange(c)}
            onClick={() => onBrandChange && onBrandChange(c)}
          />
        ))}
      </div>
-      <div className="aa-themesw-label">品牌色：{brand}（应用于 CSS 变量 --brand 实时预览）</div>
+      <div className="aa-themesw-label">品牌色：{brand}（应用于 Aurora 品牌令牌实时预览）</div>
    </div>
  );
 }
@@ -1,10 +1,15 @@
 <template>
-  <div class="aa-themesw">
+  <div class="aa-themesw" role="radiogroup" aria-label="主题模式">
    <div
      v-for="m in modes"
      :key="m.value"
      class="aa-themesw-opt"
+      role="radio"
+      tabindex="0"
+      :aria-checked="mode === m.value"
      :class="{ 'is-active': mode === m.value }"
+      @keydown.enter="$emit('update:mode', m.value)"
+      @keydown.space.prevent="$emit('update:mode', m.value)"
      @click="$emit('update:mode', m.value)"
    >
      <span class="aa-themesw-dot" :class="m.value"></span>{{ m.label }}
@@ -14,12 +19,18 @@
        v-for="c in brands"
        :key="c"
        class="aa-themesw-color"
+        role="radio"
+        :aria-label="'品牌色 ' + c"
+        tabindex="0"
+        :aria-checked="brand === c"
        :class="{ 'is-active': brand === c }"
        :style="{ background: c }"
+        @keydown.enter="$emit('update:brand', c)"
+        @keydown.space.prevent="$emit('update:brand', c)"
        @click="$emit('update:brand', c)"
      ></span>
    </div>
-    <div class="aa-themesw-label">品牌色：{{ brand }}（应用于 CSS 变量 --brand 实时预览）</div>
+    <div class="aa-themesw-label">品牌色：{{ brand }}（应用于 Aurora 品牌令牌实时预览）</div>
  </div>
 </template>

@@ -33,8 +44,9 @@ export default {
  data() {
    return {
      modes: [
-        { value: 'light', label: '浅色' },
-        { value: 'dark', label: '深色' }
+        { value: 'light', label: '日间' },
+        { value: 'dark', label: '夜间' },
+        { value: 'auto', label: '自动' }
      ],
      brands: ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96']
    };
@@ -1,10 +1,15 @@
 <template>
-  <div class="aa-themesw">
+  <div class="aa-themesw" role="radiogroup" aria-label="主题模式">
    <div
      v-for="m in modes"
      :key="m.value"
      class="aa-themesw-opt"
+      role="radio"
+      tabindex="0"
+      :aria-checked="mode === m.value"
      :class="{ 'is-active': mode === m.value }"
+      @keydown.enter="emit('update:mode', m.value)"
+      @keydown.space.prevent="emit('update:mode', m.value)"
      @click="emit('update:mode', m.value)"
    >
      <span class="aa-themesw-dot" :class="m.value"></span>{{ m.label }}
@@ -14,12 +19,18 @@
        v-for="c in brands"
        :key="c"
        class="aa-themesw-color"
+        role="radio"
+        :aria-label="'品牌色 ' + c"
+        tabindex="0"
+        :aria-checked="brand === c"
        :class="{ 'is-active': brand === c }"
        :style="{ background: c }"
+        @keydown.enter="emit('update:brand', c)"
+        @keydown.space.prevent="emit('update:brand', c)"
        @click="emit('update:brand', c)"
      ></span>
    </div>
-    <div class="aa-themesw-label">品牌色：{{ brand }}（应用于 CSS 变量 --brand 实时预览）</div>
+    <div class="aa-themesw-label">品牌色：{{ brand }}（应用于 Aurora 品牌令牌实时预览）</div>
  </div>
 </template>

@@ -30,8 +41,9 @@ defineProps({
 });
 const emit = defineEmits(['update:mode', 'update:brand']);
 const modes = [
-  { value: 'light', label: '浅色' },
-  { value: 'dark', label: '深色' }
+  { value: 'light', label: '日间' },
+  { value: 'dark', label: '夜间' },
+  { value: 'auto', label: '自动' }
 ];
 const brands = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];
 </script>