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 个 —— 历史从未跟踪且属构建产物，保持现状。
This commit is contained in:
aurora-admin
+235
-14
@@ -109,21 +109,75 @@ a:hover { color: var(--au-color-brand-hover); }
|
||||
.topnav a:hover { color: var(--au-color-brand); }
|
||||
.topnav a.active { color: var(--au-color-brand); font-weight: 500; }
|
||||
|
||||
/* 语言切换：中/EN 双段，当前语言高亮 */
|
||||
.lang-toggle {
|
||||
margin-left: 12px; height: 28px; padding: 0 10px;
|
||||
display: inline-flex; align-items: center; gap: 2px;
|
||||
/* 语言切换：下拉选择（触发器 + 语言菜单），与悬浮主题菜单同一套令牌语言 */
|
||||
.lang-select { position: relative; margin-left: 12px; flex-shrink: 0; }
|
||||
.lang-trigger {
|
||||
height: 34px; padding: 0 10px;
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
border: 1px solid var(--au-color-border); border-radius: var(--au-radius-base);
|
||||
background: var(--au-color-card-bg); cursor: pointer;
|
||||
font-family: var(--au-font-family-num); font-size: 12px;
|
||||
color: var(--au-color-text-secondary);
|
||||
transition: border-color .15s;
|
||||
font-family: var(--au-font-family); font-size: 13px;
|
||||
color: var(--au-color-text-body);
|
||||
transition: border-color .15s, color .15s, box-shadow .15s;
|
||||
}
|
||||
.lang-trigger:hover { border-color: var(--au-color-brand); color: var(--au-color-brand); }
|
||||
.lang-trigger:focus-visible { outline: 2px solid var(--au-color-focus-ring); outline-offset: 1px; }
|
||||
.lang-trigger[aria-expanded="true"] {
|
||||
border-color: var(--au-color-brand);
|
||||
color: var(--au-color-brand);
|
||||
box-shadow: 0 0 0 2px var(--au-color-focus-ring);
|
||||
}
|
||||
.lang-globe { flex: 0 0 auto; }
|
||||
.lang-cur { line-height: 1; white-space: nowrap; }
|
||||
.lang-caret { flex: 0 0 auto; opacity: .7; transition: transform .18s ease; }
|
||||
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
|
||||
|
||||
.lang-menu {
|
||||
position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
|
||||
width: 186px; padding: 6px;
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
background: var(--au-color-card-bg);
|
||||
border: 1px solid var(--au-color-border);
|
||||
border-radius: var(--au-radius-large);
|
||||
box-shadow: var(--au-shadow-high);
|
||||
animation: lang-menu-in .16s ease-out;
|
||||
}
|
||||
.lang-menu.hidden { display: none; }
|
||||
@keyframes lang-menu-in {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.lang-head {
|
||||
padding: 3px 8px 7px; margin-bottom: 2px;
|
||||
border-bottom: 1px solid var(--au-color-border);
|
||||
color: var(--au-color-text-secondary); font-size: 11px; line-height: 16px;
|
||||
}
|
||||
.lang-opt {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
width: 100%; min-height: 32px; padding: 0 8px;
|
||||
border: 0; border-radius: var(--au-radius-small);
|
||||
background: transparent; color: var(--au-color-text-body);
|
||||
font: inherit; font-size: 13px; text-align: start; cursor: pointer;
|
||||
}
|
||||
.lang-opt:hover,
|
||||
.lang-opt:focus-visible { background: var(--au-color-brand-bg); color: var(--au-color-brand); outline: none; }
|
||||
.lang-opt[aria-selected="true"] { color: var(--au-color-brand); font-weight: 600; }
|
||||
.lang-opt-name { flex: 1; white-space: nowrap; }
|
||||
.lang-opt-code {
|
||||
font-family: var(--au-font-family-num); font-size: 10.5px; letter-spacing: .04em;
|
||||
color: var(--au-color-text-placeholder);
|
||||
}
|
||||
.lang-opt[aria-selected="true"] .lang-opt-code { color: var(--au-color-brand); }
|
||||
.lang-check { flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
|
||||
.lang-opt[aria-selected="true"] .lang-check { opacity: 1; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lang-menu { animation: none; }
|
||||
.lang-caret, .lang-check { transition: none; }
|
||||
}
|
||||
/* 窄屏收起语言名（仅留图标 + 箭头，56px）：实测 1100px 以下顶栏会被挤到溢出 */
|
||||
@media (max-width: 1100px) {
|
||||
.lang-cur { display: none; }
|
||||
}
|
||||
.lang-toggle:hover { border-color: var(--au-color-brand); }
|
||||
.lang-toggle .lang-sep { opacity: .4; margin: 0 2px; }
|
||||
.lang-toggle .lang-zh,
|
||||
.lang-toggle .lang-en { padding: 0 2px; }
|
||||
.lang-toggle .active { color: var(--au-color-brand); font-weight: 600; }
|
||||
.topnav a.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -466,6 +520,10 @@ a.chip:hover { color: var(--au-color-brand); }
|
||||
.callout.warn { background: #FFF7E6; border: 1px solid #FFE58F; color: #AD6800; }
|
||||
.callout.note { background: var(--au-color-brand-bg); border: 1px solid rgba(47,84,235,.25); color: var(--au-color-brand-active); }
|
||||
.callout ul { margin: 4px 0; padding-left: 18px; }
|
||||
.callout-explain { margin: 6px 0 8px; line-height: 20px; }
|
||||
.contract-note { margin-top: 6px; padding: 8px 10px; border-left: 2px solid currentColor; background: rgba(255,255,255,.55); line-height: 20px; }
|
||||
.contract-note p { margin: 0; }
|
||||
.contract-note p + p { margin-top: 4px; }
|
||||
|
||||
/* 实现资源表 */
|
||||
.res-table { border-collapse: collapse; width: 100%; background: var(--au-color-card-bg); }
|
||||
@@ -972,6 +1030,46 @@ a.chip:hover { color: var(--au-color-brand); }
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.mode-control { position: relative; display: flex; align-items: flex-end; }
|
||||
.mode-menu {
|
||||
position: absolute;
|
||||
right: 52px;
|
||||
bottom: 0;
|
||||
width: 168px;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
background: var(--au-color-card-bg);
|
||||
border: 1px solid var(--au-color-border);
|
||||
border-radius: var(--au-radius-large);
|
||||
box-shadow: var(--au-shadow-high);
|
||||
}
|
||||
.mode-menu.hidden { display: none; }
|
||||
.mode-current { padding: 5px 8px 7px; color: var(--au-color-text-secondary); font-size: 11px; border-bottom: 1px solid var(--au-color-border); margin-bottom: 2px; }
|
||||
.mode-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 0;
|
||||
border-radius: var(--au-radius-small);
|
||||
background: transparent;
|
||||
color: var(--au-color-text-body);
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mode-menu button:hover,
|
||||
.mode-menu button:focus-visible,
|
||||
.mode-menu button.is-active { background: var(--au-color-brand-bg); color: var(--au-color-brand); outline: none; }
|
||||
.mode-dot { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--au-color-border); border-radius: 50%; box-sizing: border-box; }
|
||||
.mode-dot-light { background: #FFFFFF; }
|
||||
.mode-dot-dark { background: var(--au-color-tooltip-bg); }
|
||||
.mode-dot-auto { display: inline-flex; align-items: center; justify-content: center; background: var(--au-color-table-header-bg); color: var(--au-color-text-secondary); font-size: 9px; font-weight: 700; }
|
||||
.fab {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
@@ -1099,8 +1197,8 @@ a.chip:hover { color: var(--au-color-brand); }
|
||||
本处只留站点结构样式；演示 iframe 由 app.js 注入 aa-dark 类随令牌同步反色） ---- */
|
||||
html.aa-dark body { background: var(--au-color-page-bg); }
|
||||
html.aa-dark .topbar { background: rgba(20, 22, 28, 0.92); }
|
||||
html.aa-dark .demo-code { background: #101216; }
|
||||
html.aa-dark .a11y-key kbd { background: #262A33; border-color: #3A404C; border-bottom-color: #4A5160; }
|
||||
html.aa-dark .demo-code { background: var(--au-color-page-bg); }
|
||||
html.aa-dark .a11y-key kbd { background: var(--au-color-table-header-bg); border-color: var(--au-color-border); border-bottom-color: var(--au-color-border-strong); }
|
||||
|
||||
/* ---- 演示说明脚注 ---- */
|
||||
.demo-note { color: var(--au-color-text-placeholder); font-size: 12px; margin-top: 2px; }
|
||||
@@ -1288,5 +1386,128 @@ html.aa-dark .a11y-key kbd { background: #262A33; border-color: #3A404C; border-
|
||||
.sidebar { display: none; }
|
||||
.search-trigger .st-text { display: none; }
|
||||
.search-trigger kbd { display: none; }
|
||||
/* 顶栏一行装不下：收紧链接近距（7 项 × 8px），否则最右的语言控件会被挤出视口 */
|
||||
.topnav a { padding: 0 var(--au-space-8); }
|
||||
.content { padding: var(--au-space-24) var(--au-space-16); }
|
||||
}
|
||||
|
||||
/* ================= 顶栏窄屏折叠：汉堡 + 导航抽屉 =================
|
||||
* 折叠前实测基线（Chromium，中英双语）：
|
||||
* 中文 1280px 起 7 条链接全部折行；1100px 起文字顶出 60px 顶栏（5 条出血）；
|
||||
* 960px 起顶栏溢出；768px 起最右链接不可达；480px 起 7 条全部不可见。
|
||||
* 英文 1366px 起顶栏溢出（1280px 溢出 107px、375px 溢出 864px）。
|
||||
* 处置：收紧间距改为无条件基础层（见下）；≤1366px 折叠为汉堡 + 抽屉。
|
||||
* 注意 60px 顶栏高度被 5 处引用（.body-wrap / .sidebar / .toc 的 padding-top
|
||||
* 与 top+height、html 的 scroll-padding-top），本方案不改高度，故无需连带修改。
|
||||
*/
|
||||
|
||||
/* 汉堡按钮：宽屏隐藏 */
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--au-color-border);
|
||||
border-radius: var(--au-radius-base);
|
||||
background: var(--au-color-card-bg);
|
||||
color: var(--au-color-text-body);
|
||||
cursor: pointer;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.nav-toggle:hover { border-color: var(--au-color-brand); color: var(--au-color-brand); }
|
||||
.nav-toggle:focus-visible { outline: 2px solid var(--au-color-focus-ring); outline-offset: 1px; }
|
||||
body.nav-open .nav-toggle { border-color: var(--au-color-brand); color: var(--au-color-brand); }
|
||||
|
||||
/* 抽屉遮罩：宽屏隐藏，仅窄屏且抽屉打开时出现 */
|
||||
.nav-backdrop {
|
||||
position: fixed;
|
||||
inset: 60px 0 0 0;
|
||||
z-index: 110;
|
||||
display: none;
|
||||
background: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
/* 顶栏收紧（无条件，不挂断点）：
|
||||
* .topbar-inner 上限是 1440px，而英文导航（Getting Started / Design Tokens / For Agents）
|
||||
* 加上完整 logo 副标与可读搜索框在 1440 内始终排不下 —— 实测英文在 1600px 也折成 2 行，
|
||||
* 因为 inner 已被 1440 截断。所以这三项收紧该是常态，而不是某个断点的特例。 */
|
||||
.topbar-inner { gap: var(--au-space-16); padding: 0 var(--au-space-16); }
|
||||
/* nowrap 是防"竖排/顶出顶栏"的关键：中文没有词边界，缺它会被逐字换行 */
|
||||
.topnav a { padding: 0 10px; white-space: nowrap; }
|
||||
.logo-sub { display: none; }
|
||||
.search-trigger { max-width: 220px; }
|
||||
|
||||
/* ≤1366px：折叠为汉堡 + 右侧抽屉（.topnav 原地变成抽屉，不复制 DOM）
|
||||
* 1366 是英文实测下限：1366px 起链接不再折行，其下必须折叠。 */
|
||||
@media (max-width: 1366px) {
|
||||
.nav-toggle { display: inline-flex; }
|
||||
body.nav-open { overflow: hidden; }
|
||||
body.nav-open .nav-backdrop { display: block; }
|
||||
|
||||
.topnav {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 120;
|
||||
width: min(320px, 84vw);
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: var(--au-space-8) 0 var(--au-space-16);
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--au-color-card-bg);
|
||||
border-left: 1px solid var(--au-color-border);
|
||||
box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
|
||||
transform: translateX(100%);
|
||||
/* visibility 不能在过渡里插值：否则类切换后的首帧仍是 hidden，
|
||||
JS 的 focus() 会静默失败（键盘用户进不了抽屉）。
|
||||
故关闭时延迟到动画结束再隐藏，打开时立即生效。 */
|
||||
visibility: hidden;
|
||||
transition: transform .22s ease, visibility 0s .22s;
|
||||
}
|
||||
body.nav-open .topnav {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
transition: transform .22s ease, visibility 0s;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
height: auto;
|
||||
padding: var(--au-space-12) var(--au-space-20);
|
||||
font-size: 15px;
|
||||
}
|
||||
.topnav a:hover { background: var(--au-color-page-bg); }
|
||||
.topnav a.active { background: var(--au-color-brand-bg); }
|
||||
.topnav a.active::after { display: none; }
|
||||
}
|
||||
|
||||
/* ≤900px：搜索收成方形图标按钮（原先只剩图标却仍占一条长条），并把右侧一组顶到最右 */
|
||||
@media (max-width: 900px) {
|
||||
.search-trigger {
|
||||
flex: 0 0 34px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
.ver { display: none; }
|
||||
}
|
||||
|
||||
/* ≤560px：只留品牌标记与功能控件（品牌名与框架标签让位） */
|
||||
@media (max-width: 560px) {
|
||||
.topbar-inner { gap: 10px; padding: 0 12px; }
|
||||
.logo-text { display: none; }
|
||||
.fw-label { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.topnav { transition: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user