真正能复用的结构必须语义明确、职责隔离、变量可注入；如商品主图需用语义化标签包裹、动态属性走变量占位，SKU选择器应基于表单控件实现，价格与按钮须置于语义容器中，且前后端需事先约定数据契约。

直接硬拷贝 HTML 片段做“组件”基本不可维护——改一处，全站裂开。真正能复用的结构，必须满足三个条件：语义明确、职责隔离、变量可注入。

为什么不能直接复制粘贴商品主图 HTML？

常见错误是把一段带 class 的

...

复制到多个页面，结果后续要加懒加载、换 PhotoSwipe、支持深色模式时，得逐个文件搜改。更糟的是，图片 src 路径、alt 文本、data-pswp-width 都写死，根本没法参数化。

核心问题在于：它没分离「结构」和「数据」。真正的组件结构只描述“这里放一张主图，它可放大、可切换、需无障碍支持”，不指定“这张图叫 iphone15-blue.jpg”。

可行做法：

• 主图区域用
  包裹，固定语义，不依赖 class 名
• 每张图用 ，所有动态部分走变量占位
• 轮播容器设 tabindex="0"，这个属性不能丢，否则键盘用户无法聚焦
• 禁用 background-image 放主图——PhotoSwipe 只认

SKU 选择器怎么抽成可复用结构？

很多人把颜色/内存选项写成一堆

黑色

，结果 JS 逻辑和 DOM 混在一起，换框架就重写。正确结构应让 HTML 表达“这是一个规格选择组”，行为由 JS 或模板引擎驱动。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

推荐写法：

• 用
  包裹整个 SKU 组，
  颜色
  明确用途
• 每个选项用 黑色，而非 或
• 禁用状态同时加 disabled 和 aria-disabled="true"，读屏器才认
• 不要用 ——移动端唤起原生选择器，样式和交互都割裂
• 后端返回的 SKU 数据必须含 specs 数组（如 ["黑色", "128GB"]），前端靠 specs.join('|') 做 Map key 查表，比遍历快 3 倍

价格与购买按钮的语义化容器怎么定义？

价格不是孤立数字，它和库存、SKU、购买动作强关联。把 ¥7999 单独拎出来，后续加“限时折扣”或“缺货提示”就得动结构。

应该用一个语义容器承载整块决策信息：

• 用
  或更准确的

  包住价格 + 库存提示 + 按钮
• 价格数字用 7999 单独包裹，方便 JS 动态更新且保留 Schema 结构
• 购买按钮必须是 加入购物车，type="button" 防止误触表单提交
• 禁用态加 pointer-events: none + cursor: not-allowed，光靠 opacity 移动端仍可点

最难但最容易被跳过的，是把“哪些字段必须由后端提供”提前约定清楚。比如 data-pswp-width 必须是真实像素值，specs 必须是字符串数组，skuId 不能为空——这些不是前端能自己猜出来的。结构能复用的前提，是数据契约先立住。