Files
aurora-admin/frameworks/BackToTop.html
T
aurora-admin eb25feedaf 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

58 lines
2.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aurora Admin · BackToTop(普通 H5)</title>
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
<link rel="stylesheet" href="BackToTop.css" />
<style>
body { margin: 0; background: var(--au-color-page-bg); font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); }
.aa-demo-banner { padding: 24px; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); }
.aa-demo-banner h2 { margin: 0 0 8px; color: var(--au-color-text-title); font-size: 18px; }
.aa-demo-banner p { margin: 0; color: var(--au-color-text-secondary); font-size: 13px; }
.aa-demo-spacer { height: 2200px; padding: 24px; color: var(--au-color-text-secondary); }
</style>
</head>
<body>
<div class="aa-demo-banner">
<h2>向下滚动页面</h2>
<p>滚动超过 400px 后右下角出现返回顶部按钮,环显示滚动进度,点击平滑回到顶部。</p>
</div>
<div class="aa-demo-spacer">这里是长内容占位区……</div>
<div class="aa-backtop aa-no-ring" id="backtopPlain" role="button" aria-label="返回顶部(无进度环)" style="left:24px;right:auto;display:flex">
<span class="aa-backtop-arrow" aria-hidden="true">↑</span>
</div>
<div class="aa-backtop" id="backtop" role="button" aria-label="返回顶部">
<svg viewBox="0 0 44 44">
<circle class="aa-backtop-ring-bg" aria-label="返回顶部" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
<circle class="aa-backtop-ring-fg" role="button" aria-label="返回顶部" id="ring" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
</svg>
<span class="aa-backtop-arrow" aria-label="返回顶部">↑</span>
</div>
<script>
var THRESHOLD = 400, R = 20, C = 2 * Math.PI * R;
var el = document.getElementById('backtop');
var ring = document.getElementById('ring');
ring.style.strokeDasharray = C;
ring.style.strokeDashoffset = C;
function onScroll() {
var st = window.pageYOffset || document.documentElement.scrollTop;
var max = document.documentElement.scrollHeight - window.innerHeight;
var p = max > 0 ? st / max : 0;
el.classList.toggle('is-visible', st > THRESHOLD);
ring.style.strokeDashoffset = C * (1 - p);
}
window.addEventListener('scroll', onScroll, { passive: true });
el.addEventListener('click', function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
onScroll();
</script>
</body>
</html>