移动端规格面板必须用 button 替代原生 radio：确保点击热区≥44px、禁用态用 aria-disabled+CSS、包裹于 fieldset、SKU 映射表初始化时构建、touchstart 防连点、规格组用 aria-hidden+inert 控制显隐。
移动端规格面板必须用
原生 input[type="radio"] 在 iOS 和 Android 上点击热区小、禁用态样式难统一、aria-disabled 支持差，且无法可靠阻止连点。用户一划就误触两个选项，尤其在折叠屏或横屏下更明显。
真实场景中，你得让每个规格项：可点击区域 ≥ 44px（苹果人机指南硬性要求）、视觉反馈即时、禁用时仍保留在 tab 键盘流里——这些 button 都能直接满足，input 得靠额外 wrapper 和 JS 拦截才能勉强凑合。
- 每个规格项写成
<button type="button" data-spec="color" data-value="red">红色</button>，不依赖中文文本做逻辑判断 - 禁用不用
disabled属性（会跳过表单提交、屏幕阅读器跳过），改用aria-disabled="true"+ CSS 控制opacity和pointer-events - 所有规格容器用
<fieldset></fieldset>包裹，加name="color"方便 JS 批量获取：document.querySelectorAll('[name="color"]')
点击后动态禁用其他规格项，关键在 SKU 映射表构建
不是“点了颜色就灰掉所有尺码”，而是：当前已选 color=red，再遍历所有 size 值（如 "s", "m", "l"），拼出 "red_s", "red_m", "red_l" 这些 key，查你预先生成的 validSkus 对象——有且 stock > 0 的才保留可点状态。
这个映射表必须由后端返回原始 skus 数组生成，不能靠前端硬编码组合。常见错误是把映射逻辑塞进点击事件里反复计算，导致滑动卡顿；正确做法是在初始化时一次性建好：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
const validSkus = {};
skus.forEach(sku => {
const key = [sku.color, sku.size, sku.version].filter(Boolean).join('_');
validSkus[key] = { skuId: sku.id, stock: sku.stock };
});
后续每次点击只做 O(1) 查表，不遍历全量 SKU。
移动端防连点和触控反馈不能只靠 CSS
用户快速连点两次同一按钮，click 事件会触发两次，导致状态错乱（比如点两下“红色”，selectedColor 变成 null 再变回 "red"）。CSS 的 :active 伪类在 iOS 上延迟高、持续时间不可控，视觉反馈滞后。
- 给每个
button绑定touchstart，立即加class="tapped"并设pointer-events: none，200ms 后恢复 —— 比click更快响应 - 禁用期间不移除
data-value或data-spec，保证状态可追溯 - 不要用
setTimeout模拟节流，移动端touchend时间戳可能比touchstart还早，优先用Promise.race()+AbortController控制超时
折叠/展开规格组必须保留在 <table> 或 <code><dl></dl> DOM 内
移动端空间紧张，常需把“包装清单”“售后政策”这类非核心规格收起。但很多人用 display: none 或抽离 DOM 再 innerHTML 插入，结果：打印时消失、SEO 抓不到、屏幕阅读器跳过整块内容。
正确方式是用 <tbody class="spec-group" aria-hidden="true" inert> 包裹一组 <code><tr>（规格表）或 <code><div>（<code><dl></dl> 场景），显隐只切这两个属性，DOM 结构始终完整：
<table class="spec-table">
<tr><th scope="row">颜色</th><td>...</td></tr>
<tbody class="spec-group" aria-hidden="true" inert>
<tr><th scope="row">包装清单</th><td>...</td></tr>
</tbody>
</table>
这比 <details></details> 更可控——后者在微信内置浏览器里常被拦截，且无法用 JS 精确控制展开时机。
