v1.3.0: 修复验收链路（iframe 真实渲染+跨帧断言）、基座焦点环、契约第二批 15 个
回归通过率此前不可信：run-tests.ps1 抽取演示页 body 时剥离全部 <script>， 而 79 个 H5 演示页的 DOM 全由内联脚本渲染，且测试页从未引用 frameworks/<组件>.css —— 断言跑在空 DOM + 无组件样式上，v1.2.0 的 75.1% 属结构性误报。 Fixed — 验收链路 - 测试页改为 iframe 加载真实演示页（_template.html），_runtime.js 跨帧在真实 渲染结果上断言：帧内 getComputedStyle/styleSheets/outerHTML，用例自动标注 + 帧内描边，结果 postMessage 上报 - 标注改为容器下钻（.row/.demo-block → 首个含 ≥2 有效子元素的容器，最多 6 层） - 新增 N/A 语义：静态组件键盘/ARIA 记 skip 而非失败；对比度与 token 检查限定 在被测组件区，页头文档文字不计 - 通过率分母改为 pass/(pass+fail)，tools/run-regression.mjs 与收集器同口径 Added — 设计系统 - 基座 :focus-visible 统一焦点环（colors_and_type.css）。--au-color-focus-ring 此前只定义未消费，79 个组件样式仅 20 个自带 focus 规则 —— 一次性消除 66 页失败 - tests/_collect.html：零依赖浏览器批量回归收集器（并发 iframe + 汇总） - tests/_index_template.html：测试总览页模板外置，读数来自 data.json Added — 契约第二批（展示类 15 个） - tree/collapse/calendar/carousel/imagepreview/qrcode/countdown/watermark/ cardlist/treetable/timelinelist/steplist/chartpanel/dashboardcard/employeecard - 逐份从规格原文（组件2/4/7/9.txt）提炼，含 dims/variants/anatomy/structure/ usageHints/doNotInvent/unknowns；契约化 21 → 36/79 Changed - run-tests.ps1 重写：删除失效的快照抽取（占位符替换早已不匹配模板），改生成 iframe 版测试页；输出 WriteAllText 无 BOM；保持 ASCII-only，中文移入 UTF-8 模板 - 回归基线：960 断言 / 794 通过 / 85.1% / 11 页全通过 / N/A 27 - CHANGELOG/TESTING/改造清单同步；测试总览页与首页通过率联动 验证：浏览器全量 79 页收集器跑通两次，基线一致；详情页契约章节 （含 doNotInvent/unknowns）、chip、首页「通过率 85.1%」、changelog v1.3.0 实测通过
This commit is contained in:
aurora-admin
+79
-123
@@ -10,10 +10,12 @@
|
||||
body { margin: 0; font-family: var(--au-font-family); color: var(--au-color-text-body); background: var(--au-color-page-bg); }
|
||||
.shell { max-width: 1280px; margin: 0 auto; padding: 24px; }
|
||||
.shell h1 { margin: 0 0 4px; font-size: 24px; color: var(--au-color-text-title); }
|
||||
.shell h1 a { font-size: 13px; margin-left: 8px; color: var(--au-color-brand); }
|
||||
.shell .desc { margin: 0 0 20px; color: var(--au-color-text-secondary); font-size: 14px; }
|
||||
.summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
|
||||
.pill { height: 28px; padding: 0 12px; border-radius: var(--au-radius-base); background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); display: inline-flex; align-items: center; font-family: var(--au-font-family-num); font-size: 13px; color: var(--au-color-text-body); }
|
||||
.pill { height: 28px; padding: 0 12px; border-radius: var(--au-radius-base); background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); display: inline-flex; align-items: center; font-family: var(--au-font-family-num); font-size: 13px; color: var(--au-color-text-body); text-decoration: none; }
|
||||
.pill strong { margin-right: 4px; color: var(--au-color-brand); }
|
||||
.pill.link:hover { border-color: var(--au-color-brand); color: var(--au-color-brand); }
|
||||
.cat { margin: 24px 0 12px; }
|
||||
.cat h2 { margin: 0 0 10px; font-size: 16px; color: var(--au-color-text-title); }
|
||||
.cat h2 .en { font-family: var(--au-font-family-num); font-size: 12px; color: var(--au-color-text-secondary); margin-left: 8px; }
|
||||
@@ -22,136 +24,90 @@ body { margin: 0; font-family: var(--au-font-family); color: var(--au-color-text
|
||||
.card:hover { border-color: var(--au-color-brand); box-shadow: var(--au-shadow-low); }
|
||||
.card .zh { font-size: 14px; color: var(--au-color-text-title); }
|
||||
.card .en { font-family: var(--au-font-family-num); font-size: 11px; color: var(--au-color-text-secondary); }
|
||||
.card .badge { float: right; font-family: var(--au-font-family-num); font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--au-color-table-header-bg); color: var(--au-color-text-secondary); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<h1>测试总览 <a href="../site/index.html" style="font-size:13px; margin-left:8px;">← 文档站</a></h1>
|
||||
<p class="desc">为每个组件生成独立测试页（断言协议 + 通用测试矩阵）。点击卡片进入测试页；通过率会写 localStorage[aa-test-log]。</p>
|
||||
<div class="summary">
|
||||
<span class="pill"><strong>79</strong> 个组件测试</span>
|
||||
<span class="pill" id="passed">通过：—</span>
|
||||
<span class="pill" id="failed">失败：—</span>
|
||||
</div>
|
||||
<div class="cat">
|
||||
<h2>通用 <span class="en">general</span></h2>
|
||||
<div class="grid">
|
||||
<a class="card" data-slug="button" href="button.html"><div class="zh">按钮</div><div class="en">Button</div></a>
|
||||
<a class="card" data-slug="card" href="card.html"><div class="zh">卡片</div><div class="en">Card</div></a>
|
||||
<a class="card" data-slug="tag" href="tag.html"><div class="zh">标签</div><div class="en">Tag</div></a>
|
||||
<a class="card" data-slug="buttongroup" href="buttongroup.html"><div class="zh">按钮组</div><div class="en">ButtonGroup</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cat">
|
||||
<h2>导航 <span class="en">navigation</span></h2>
|
||||
<div class="grid">
|
||||
<a class="card" data-slug="tabs" href="tabs.html"><div class="zh">标签页</div><div class="en">Tabs</div></a>
|
||||
<a class="card" data-slug="steps" href="steps.html"><div class="zh">步骤条</div><div class="en">Steps</div></a>
|
||||
<a class="card" data-slug="breadcrumb" href="breadcrumb.html"><div class="zh">面包屑</div><div class="en">Breadcrumb</div></a>
|
||||
<a class="card" data-slug="dropdown" href="dropdown.html"><div class="zh">下拉菜单</div><div class="en">Dropdown</div></a>
|
||||
<a class="card" data-slug="enhancedtabnav" href="enhancedtabnav.html"><div class="zh">标签页导航增强</div><div class="en">EnhancedTabNav</div></a>
|
||||
<a class="card" data-slug="sidemenu" href="sidemenu.html"><div class="zh">侧边栏菜单</div><div class="en">SideMenu</div></a>
|
||||
<a class="card" data-slug="topmenu" href="topmenu.html"><div class="zh">顶部菜单</div><div class="en">TopMenu</div></a>
|
||||
<a class="card" data-slug="mixednavigation" href="mixednavigation.html"><div class="zh">混合导航</div><div class="en">MixedNavigation</div></a>
|
||||
<a class="card" data-slug="quicknav" href="quicknav.html"><div class="zh">快捷导航</div><div class="en">QuickNav</div></a>
|
||||
<a class="card" data-slug="anchornav" href="anchornav.html"><div class="zh">锚点导航</div><div class="en">AnchorNav</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cat">
|
||||
<h2>数据录入 <span class="en">input</span></h2>
|
||||
<div class="grid">
|
||||
<a class="card" data-slug="input" href="input.html"><div class="zh">输入框</div><div class="en">Input</div></a>
|
||||
<a class="card" data-slug="select" href="select.html"><div class="zh">选择器</div><div class="en">Select</div></a>
|
||||
<a class="card" data-slug="segmented" href="segmented.html"><div class="zh">分段控制器</div><div class="en">Segmented</div></a>
|
||||
<a class="card" data-slug="transfer" href="transfer.html"><div class="zh">穿梭框</div><div class="en">Transfer</div></a>
|
||||
<a class="card" data-slug="rate" href="rate.html"><div class="zh">评分</div><div class="en">Rate</div></a>
|
||||
<a class="card" data-slug="slider" href="slider.html"><div class="zh">滑块</div><div class="en">Slider</div></a>
|
||||
<a class="card" data-slug="mention" href="mention.html"><div class="zh">提及</div><div class="en">Mention</div></a>
|
||||
<a class="card" data-slug="autocomplete" href="autocomplete.html"><div class="zh">自动完成</div><div class="en">AutoComplete</div></a>
|
||||
<a class="card" data-slug="bankcardinput" href="bankcardinput.html"><div class="zh">银行卡输入</div><div class="en">BankCardInput</div></a>
|
||||
<a class="card" data-slug="idcardinput" href="idcardinput.html"><div class="zh">身份证输入</div><div class="en">IDCardInput</div></a>
|
||||
<a class="card" data-slug="plateinput" href="plateinput.html"><div class="zh">车牌输入</div><div class="en">PlateInput</div></a>
|
||||
<a class="card" data-slug="radiocard" href="radiocard.html"><div class="zh">单选卡片</div><div class="en">RadioCard</div></a>
|
||||
<a class="card" data-slug="checkboxcard" href="checkboxcard.html"><div class="zh">复选卡片</div><div class="en">CheckboxCard</div></a>
|
||||
<a class="card" data-slug="listpicker" href="listpicker.html"><div class="zh">列表选择器</div><div class="en">ListPicker</div></a>
|
||||
<a class="card" data-slug="cascader" href="cascader.html"><div class="zh">级联选择器</div><div class="en">Cascader</div></a>
|
||||
<a class="card" data-slug="colorpicker" href="colorpicker.html"><div class="zh">颜色选择器</div><div class="en">ColorPicker</div></a>
|
||||
<a class="card" data-slug="rangequickpicker" href="rangequickpicker.html"><div class="zh">日期范围快捷选择</div><div class="en">RangeQuickPicker</div></a>
|
||||
<a class="card" data-slug="numberrangeinput" href="numberrangeinput.html"><div class="zh">数字范围输入</div><div class="en">NumberRangeInput</div></a>
|
||||
<a class="card" data-slug="switchgroup" href="switchgroup.html"><div class="zh">开关组</div><div class="en">SwitchGroup</div></a>
|
||||
<a class="card" data-slug="dragupload" href="dragupload.html"><div class="zh">拖拽上传</div><div class="en">DragUpload</div></a>
|
||||
<a class="card" data-slug="signaturepad" href="signaturepad.html"><div class="zh">签名板</div><div class="en">SignaturePad</div></a>
|
||||
<a class="card" data-slug="codeinput" href="codeinput.html"><div class="zh">验证码输入</div><div class="en">CodeInput</div></a>
|
||||
<a class="card" data-slug="passwordinput" href="passwordinput.html"><div class="zh">密码输入</div><div class="en">PasswordInput</div></a>
|
||||
<a class="card" data-slug="phoneinput" href="phoneinput.html"><div class="zh">手机号输入</div><div class="en">PhoneInput</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cat">
|
||||
<h2>数据展示 <span class="en">display</span></h2>
|
||||
<div class="grid">
|
||||
<a class="card" data-slug="table" href="table.html"><div class="zh">数据表格</div><div class="en">Table</div></a>
|
||||
<a class="card" data-slug="tree" href="tree.html"><div class="zh">树形控件</div><div class="en">Tree</div></a>
|
||||
<a class="card" data-slug="collapse" href="collapse.html"><div class="zh">折叠面板</div><div class="en">Collapse</div></a>
|
||||
<a class="card" data-slug="calendar" href="calendar.html"><div class="zh">日历</div><div class="en">Calendar</div></a>
|
||||
<a class="card" data-slug="carousel" href="carousel.html"><div class="zh">轮播</div><div class="en">Carousel</div></a>
|
||||
<a class="card" data-slug="imagepreview" href="imagepreview.html"><div class="zh">图片预览</div><div class="en">ImagePreview</div></a>
|
||||
<a class="card" data-slug="qrcode" href="qrcode.html"><div class="zh">二维码</div><div class="en">QRCode</div></a>
|
||||
<a class="card" data-slug="countdown" href="countdown.html"><div class="zh">倒计时</div><div class="en">Countdown</div></a>
|
||||
<a class="card" data-slug="watermark" href="watermark.html"><div class="zh">水印</div><div class="en">Watermark</div></a>
|
||||
<a class="card" data-slug="cardlist" href="cardlist.html"><div class="zh">卡片列表</div><div class="en">CardList</div></a>
|
||||
<a class="card" data-slug="treetable" href="treetable.html"><div class="zh">树形表格</div><div class="en">TreeTable</div></a>
|
||||
<a class="card" data-slug="expandabletable" href="expandabletable.html"><div class="zh">可展开表格</div><div class="en">ExpandableTable</div></a>
|
||||
<a class="card" data-slug="mergedcelltable" href="mergedcelltable.html"><div class="zh">合并单元格表格</div><div class="en">MergedCellTable</div></a>
|
||||
<a class="card" data-slug="summaryrowtable" href="summaryrowtable.html"><div class="zh">统计行表格</div><div class="en">SummaryRowTable</div></a>
|
||||
<a class="card" data-slug="fixedcolumntable" href="fixedcolumntable.html"><div class="zh">固定列表格</div><div class="en">FixedColumnTable</div></a>
|
||||
<a class="card" data-slug="timelinelist" href="timelinelist.html"><div class="zh">时间轴列表</div><div class="en">TimelineList</div></a>
|
||||
<a class="card" data-slug="steplist" href="steplist.html"><div class="zh">步骤列表</div><div class="en">StepList</div></a>
|
||||
<a class="card" data-slug="chartpanel" href="chartpanel.html"><div class="zh">图表面板</div><div class="en">ChartPanel</div></a>
|
||||
<a class="card" data-slug="dashboardcard" href="dashboardcard.html"><div class="zh">仪表板卡片</div><div class="en">DashboardCard</div></a>
|
||||
<a class="card" data-slug="employeecard" href="employeecard.html"><div class="zh">员工卡片</div><div class="en">EmployeeCard</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cat">
|
||||
<h2>反馈 <span class="en">feedback</span></h2>
|
||||
<div class="grid">
|
||||
<a class="card" data-slug="modal" href="modal.html"><div class="zh">对话框</div><div class="en">Modal</div></a>
|
||||
<a class="card" data-slug="popconfirm" href="popconfirm.html"><div class="zh">气泡确认框</div><div class="en">Popconfirm</div></a>
|
||||
<a class="card" data-slug="bottomsheet" href="bottomsheet.html"><div class="zh">底部面板</div><div class="en">BottomSheet</div></a>
|
||||
<a class="card" data-slug="messagepro" href="messagepro.html"><div class="zh">全局提示增强</div><div class="en">MessagePro</div></a>
|
||||
<a class="card" data-slug="notificationpro" href="notificationpro.html"><div class="zh">通知提醒增强</div><div class="en">NotificationPro</div></a>
|
||||
<a class="card" data-slug="progressvariants" href="progressvariants.html"><div class="zh">进度条变体</div><div class="en">ProgressVariants</div></a>
|
||||
<a class="card" data-slug="skeletonpro" href="skeletonpro.html"><div class="zh">骨架屏增强</div><div class="en">SkeletonPro</div></a>
|
||||
<a class="card" data-slug="emptypro" href="emptypro.html"><div class="zh">空状态增强</div><div class="en">EmptyPro</div></a>
|
||||
<a class="card" data-slug="loadingoverlay" href="loadingoverlay.html"><div class="zh">加载遮罩</div><div class="en">LoadingOverlay</div></a>
|
||||
<a class="card" data-slug="resultvariants" href="resultvariants.html"><div class="zh">结果页变体</div><div class="en">ResultVariants</div></a>
|
||||
<a class="card" data-slug="exceptionvariants" href="exceptionvariants.html"><div class="zh">异常页变体</div><div class="en">ExceptionVariants</div></a>
|
||||
<a class="card" data-slug="confirmmodal" href="confirmmodal.html"><div class="zh">确认弹窗</div><div class="en">ConfirmModal</div></a>
|
||||
<a class="card" data-slug="alertmodal" href="alertmodal.html"><div class="zh">提示弹窗</div><div class="en">AlertModal</div></a>
|
||||
<a class="card" data-slug="formmodal" href="formmodal.html"><div class="zh">表单弹窗</div><div class="en">FormModal</div></a>
|
||||
<a class="card" data-slug="fullscreenmodal" href="fullscreenmodal.html"><div class="zh">全屏弹窗</div><div class="en">FullScreenModal</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cat">
|
||||
<h2>工具与系统 <span class="en">system</span></h2>
|
||||
<div class="grid">
|
||||
<a class="card" data-slug="shortcutpanel" href="shortcutpanel.html"><div class="zh">键盘快捷键面板</div><div class="en">ShortcutPanel</div></a>
|
||||
<a class="card" data-slug="backtotop" href="backtotop.html"><div class="zh">返回顶部</div><div class="en">BackToTop</div></a>
|
||||
<a class="card" data-slug="pagetransition" href="pagetransition.html"><div class="zh">页面跳转</div><div class="en">PageTransition</div></a>
|
||||
<a class="card" data-slug="themeswitcher" href="themeswitcher.html"><div class="zh">主题切换</div><div class="en">ThemeSwitcher</div></a>
|
||||
<a class="card" data-slug="layoutswitcher" href="layoutswitcher.html"><div class="zh">布局切换</div><div class="en">LayoutSwitcher</div></a>
|
||||
<a class="card" data-slug="densityswitcher" href="densityswitcher.html"><div class="zh">密度切换</div><div class="en">DensitySwitcher</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<h1>测试总览 <a href="../site/index.html">← 文档站</a></h1>
|
||||
<p class="desc">每个组件一份独立测试页：iframe 加载真实 H5 演示页，断言在帧内真实渲染结果上运行（用例由 <code>_runtime.js</code> 运行期标注）。</p>
|
||||
<div class="summary">
|
||||
<span class="pill"><strong>79</strong> 个组件测试</span>
|
||||
<span class="pill" id="report-rate">最近回归：—</span>
|
||||
<a class="pill link" href="_collect.html">▶ 批量回归收集器</a>
|
||||
</div>
|
||||
<div id="cats"><p class="desc">正在读取 site/data.json…</p></div>
|
||||
</div>
|
||||
|
||||
<script src="../site/logger.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
if (!window.aaLogger) return;
|
||||
var s = window.aaLogger.summary();
|
||||
var p = document.getElementById('passed');
|
||||
var f = document.getElementById('failed');
|
||||
if (p) p.textContent = '通过：' + s.testPass;
|
||||
if (f) f.textContent = '失败：' + s.testFail;
|
||||
'use strict';
|
||||
var CAT = [
|
||||
['general', '通用', 'general'],
|
||||
['navigation', '导航', 'navigation'],
|
||||
['input', '数据录入', 'input'],
|
||||
['display', '数据展示', 'display'],
|
||||
['feedback', '反馈', 'feedback'],
|
||||
['system', '工具与系统', 'system']
|
||||
];
|
||||
|
||||
function card(c) {
|
||||
var a = document.createElement('a');
|
||||
a.className = 'card';
|
||||
a.setAttribute('data-slug', c.slug);
|
||||
a.href = c.slug + '.html';
|
||||
var en = document.createElement('div'); en.className = 'en'; en.textContent = c.name;
|
||||
var zh = document.createElement('div'); zh.className = 'zh'; zh.textContent = c.name.split(' ')[0];
|
||||
if (c.contractRef) {
|
||||
var b = document.createElement('span'); b.className = 'badge'; b.textContent = '契约';
|
||||
zh.appendChild(b);
|
||||
}
|
||||
a.appendChild(zh); a.appendChild(en);
|
||||
return a;
|
||||
}
|
||||
|
||||
function render(components) {
|
||||
var host = document.getElementById('cats');
|
||||
host.innerHTML = '';
|
||||
CAT.forEach(function (row) {
|
||||
var slugCat = row[0], zh = row[1], en = row[2];
|
||||
var items = components.filter(function (c) { return (c.category || 'general') === slugCat; });
|
||||
if (!items.length) return;
|
||||
var wrap = document.createElement('div'); wrap.className = 'cat';
|
||||
var h = document.createElement('h2');
|
||||
h.textContent = zh;
|
||||
var s = document.createElement('span'); s.className = 'en'; s.textContent = en;
|
||||
h.appendChild(s);
|
||||
var grid = document.createElement('div'); grid.className = 'grid';
|
||||
items.forEach(function (c) { grid.appendChild(card(c)); });
|
||||
wrap.appendChild(h); wrap.appendChild(grid);
|
||||
host.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
|
||||
fetch('../site/data.json', { cache: 'no-store' })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (d) { render(d.components || []); })
|
||||
.catch(function () {
|
||||
document.getElementById('cats').innerHTML = '<p class="desc">读取 site/data.json 失败：请先跑 build-site.ps1，并通过 dev-server 访问本页。</p>';
|
||||
});
|
||||
|
||||
fetch('report.json', { cache: 'no-store' })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (rep) {
|
||||
var el = document.getElementById('report-rate');
|
||||
if (el) el.textContent = '最近回归：' + rep.passRate + '%（' + rep.generated + '）';
|
||||
})
|
||||
.catch(function () {});
|
||||
|
||||
if (window.aaLogger) {
|
||||
var s = window.aaLogger.summary();
|
||||
var p = document.createElement('span');
|
||||
p.className = 'pill';
|
||||
p.textContent = '本机记录：通过 ' + s.testPass + ' / 失败 ' + s.testFail;
|
||||
document.querySelector('.summary').appendChild(p);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user