真正能复用的结构必须语义明确、职责隔离、变量可注入；如商品主图需用语义化标签包裹、动态属性走变量占位，SKU选择器应基于表单控件实现，价格与按钮须置于语义容器中，且前后端需事先约定数据契约。
直接硬拷贝 HTML 片段做“组件”基本不可维护——改一处，全站裂开。真正能复用的结构，必须满足三个条件：语义明确、职责隔离、变量可注入。
为什么不能直接复制粘贴商品主图 HTML？
常见错误是把一段带 class 的 <div class="product-gallery">...</div> 复制到多个页面，结果后续要加懒加载、换 PhotoSwipe、支持深色模式时，得逐个文件搜改。更糟的是，图片 src 路径、alt 文本、data-pswp-width 都写死，根本没法参数化。
核心问题在于：它没分离「结构」和「数据」。真正的组件结构只描述“这里放一张主图，它可放大、可切换、需无障碍支持”，不指定“这张图叫 iphone15-blue.jpg”。
可行做法：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 主图区域用
<section role="region" aria-label="商品主图轮播"></section>包裹，固定语义，不依赖 class 名 - 每张图用
<img src="%7B%7Bimage_url%7D%7D" alt="{{image_alt}}" data-pswp- style="max-width:90%" data-pswp-height="{{height}}">，所有动态部分走变量占位 - 轮播容器设
tabindex="0"，这个属性不能丢，否则键盘用户无法聚焦 - 禁用
background-image放主图——PhotoSwipe 只认<img src alt="商品详情页HTML怎么提取结构做成通用复用组件" >
SKU 选择器怎么抽成可复用结构？
很多人把颜色/内存选项写成一堆 <div class="spec-item active">黑色</div>，结果 JS 逻辑和 DOM 混在一起，换框架就重写。正确结构应让 HTML 表达“这是一个规格选择组”，行为由 JS 或模板引擎驱动。
推荐写法：
- 用
<fieldset></fieldset>包裹整个 SKU 组，<legend>颜色</legend>明确用途 - 每个选项用
<input type="radio" name="color" value="black" id="color-black"><label for="color-black">黑色</label>，而非<button></button>或<div> <li>禁用状态同时加 <code>disabled和aria-disabled="true"，读屏器才认 - 不要用
<select></select>——移动端唤起原生选择器，样式和交互都割裂 - 后端返回的 SKU 数据必须含
specs数组（如["黑色", "128GB"]），前端靠specs.join('|')做 Map key 查表，比遍历快 3 倍 - 用
<div class="product-action-bar"> 或更准确的 <code><section aria-labelledby="price-heading"></section>包住价格 + 库存提示 + 按钮 - 价格数字用
<span itemprop="price">7999</span>单独包裹，方便 JS 动态更新且保留 Schema 结构 - 购买按钮必须是
<button type="button" data-sku-id="{{sku_id}}" aria-busy="false">加入购物车</button>，type="button"防止误触表单提交 - 禁用态加
pointer-events: none+cursor: not-allowed，光靠opacity移动端仍可点
价格与购买按钮的语义化容器怎么定义？
价格不是孤立数字，它和库存、SKU、购买动作强关联。把 <span class="price">¥7999</span> 单独拎出来，后续加“限时折扣”或“缺货提示”就得动结构。
应该用一个语义容器承载整块决策信息：
最难但最容易被跳过的，是把“哪些字段必须由后端提供”提前约定清楚。比如 data-pswp-width 必须是真实像素值，specs 必须是字符串数组，skuId 不能为空——这些不是前端能自己猜出来的。结构能复用的前提，是数据契约先立住。
