按钮需写type="button"并添加aria-label、data-product-id等属性；点击后用localStorage或API持久化；即时禁用按钮并反馈状态；确保键盘和移动端可访问；同步购物车状态需统一逻辑。
按钮本身怎么写才不踩语义坑
HTML 里加个 <button></button> 最简单，但别直接写 <button>加入购物车</button>。缺 type="button" 的话，某些表单上下文中会默认提交；没 aria-label 或 title 的话，屏幕阅读器用户无法识别用途；如果按钮在商品卡片里又没加 data-product-id 这类属性，后续 JS 绑定就只能靠 DOM 位置硬找，一改结构就崩。
- 必须写
type="button"（不是 submit 或留空）
- 推荐加上
data-product-id="123" 和 data-price="29.9"，方便 JS 直接读取
- 如果按钮图标化（比如只用购物车 SVG），必须配
aria-label="加入购物车：iPhone 15"
点击后怎么把商品真正“加进去”
纯 HTML 做不到持久存商品，必须靠 JS 配合本地存储或 API 调用。常见错误是直接操作 DOM 插入新行，结果刷新就丢——那只是视觉假象。
- 优先用
localStorage 存数组：JSON.parse(localStorage.getItem('cart') || '[]') 读，修改后再 localStorage.setItem('cart', JSON.stringify(newCart))
- 如果后端有接口，用
fetch('/api/cart', { method: 'POST', body: JSON.stringify({ id: 123, qty: 1 }) })，记得处理 400/409 错误（比如库存不足）
- 别在点击回调里重复调用
addEventListener，容易导致同一事件触发多次
按钮状态变化要即时且可感知
用户点完没反馈，就会狂点；加成功了没提示，会怀疑没生效。但提示不能只靠 alert()，太打断流程。
- 点击瞬间禁用按钮：
btn.disabled = true，并临时替换文字为 btn.textContent = '已加入...'
- 成功后恢复前，用
setTimeout(() => { btn.disabled = false; btn.textContent = '加入购物车'; }, 1500)
- 更好做法是加一个微动效：给按钮加
class="added"，CSS 里定义 .added { background: #4CAF50; } 并配合 transition，300ms 内变色再还原
移动端和键盘用户的兼容细节
很多人只测鼠标点击，结果触屏点不灵、Tab 键跳不过去、回车键没响应。
- 按钮必须能被
Tab 键聚焦，且按 Enter 或 Space 触发（原生 <button></button> 默认支持，但用 <div role="button"> 就得自己监听）<li>移动端点击区域至少 44×44px，小按钮外层包 <code><span></span> 或用 padding 撑开，别只靠 font-size
- iOS Safari 对快速连点（touchstart 事件并
preventDefault() 可缓解，但更稳妥是加防抖：if (isAdding) return; isAdding = true;
实际最难的不是加按钮，而是「加完之后怎么同步数量徽标、怎么合并同款商品、怎么在页面其他位置实时更新总价」——这些逻辑一旦分散在多个地方维护，三天后你自己都看不懂。
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
type="button"（不是 submit 或留空）data-product-id="123" 和 data-price="29.9"，方便 JS 直接读取aria-label="加入购物车：iPhone 15"
- 优先用
localStorage存数组：JSON.parse(localStorage.getItem('cart') || '[]')读，修改后再localStorage.setItem('cart', JSON.stringify(newCart)) - 如果后端有接口，用
fetch('/api/cart', { method: 'POST', body: JSON.stringify({ id: 123, qty: 1 }) })，记得处理 400/409 错误（比如库存不足） - 别在点击回调里重复调用
addEventListener，容易导致同一事件触发多次
按钮状态变化要即时且可感知
用户点完没反馈，就会狂点；加成功了没提示，会怀疑没生效。但提示不能只靠 alert()，太打断流程。
- 点击瞬间禁用按钮：
btn.disabled = true，并临时替换文字为 btn.textContent = '已加入...'
- 成功后恢复前，用
setTimeout(() => { btn.disabled = false; btn.textContent = '加入购物车'; }, 1500)
- 更好做法是加一个微动效：给按钮加
class="added"，CSS 里定义 .added { background: #4CAF50; } 并配合 transition，300ms 内变色再还原
移动端和键盘用户的兼容细节
很多人只测鼠标点击，结果触屏点不灵、Tab 键跳不过去、回车键没响应。
- 按钮必须能被
Tab 键聚焦，且按 Enter 或 Space 触发（原生 <button></button> 默认支持，但用 <div role="button"> 就得自己监听）<li>移动端点击区域至少 44×44px，小按钮外层包 <code><span></span> 或用 padding 撑开，别只靠 font-size
- iOS Safari 对快速连点（touchstart 事件并
preventDefault() 可缓解，但更稳妥是加防抖：if (isAdding) return; isAdding = true;
实际最难的不是加按钮，而是「加完之后怎么同步数量徽标、怎么合并同款商品、怎么在页面其他位置实时更新总价」——这些逻辑一旦分散在多个地方维护，三天后你自己都看不懂。
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
btn.disabled = true，并临时替换文字为 btn.textContent = '已加入...'
setTimeout(() => { btn.disabled = false; btn.textContent = '加入购物车'; }, 1500)
class="added"，CSS 里定义 .added { background: #4CAF50; } 并配合 transition，300ms 内变色再还原- 按钮必须能被
Tab键聚焦，且按Enter或Space触发（原生<button></button>默认支持，但用<div role="button"> 就得自己监听）<li>移动端点击区域至少 44×44px，小按钮外层包 <code><span></span>或用padding撑开，别只靠font-size - iOS Safari 对快速连点（touchstart 事件并
preventDefault()可缓解，但更稳妥是加防抖：if (isAdding) return; isAdding = true;
实际最难的不是加按钮，而是「加完之后怎么同步数量徽标、怎么合并同款商品、怎么在页面其他位置实时更新总价」——这些逻辑一旦分散在多个地方维护，三天后你自己都看不懂。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
