弹出层 Popover

订单页已经有主要内容时，Popover 只在查看订单说明附近补充一小段信息，不把用户带到另一页。

• 开始时：订单页只显示查看订单说明入口。
• 完成后：配送说明贴着入口展开，关闭后页面主体和焦点关系仍然清楚。

先判断用户是临时查看说明，还是必须完成一次确认：按钮 Button ≠ 链接 Link，外观接近也不代表负责同一件事。

• Popover 适合贴着入口解释一个局部信息，用户可以关掉后继续阅读。
• 需要阻断当前任务、确认危险动作或填写完整内容时，应改用更明确的界面结构。

看订单页中的真实界面：标注跟着触发入口和 Teleport 到 body 的弹出面板走，不靠图片坐标猜位置。

• 结构预览默认只读；点击编号或说明行可以定位真实部件。
• 重点观察入口的 aria-expanded、面板的角色、说明内容和 Escape 关闭路径。

点击查看订单说明，面板应贴着入口出现；点击关闭或按 Escape，面板消失并把用户带回原页面。

• 主要动作：打开订单说明；局部结果：配送说明可读。
• 重新进入会清理面板状态，避免上一次打开结果污染下一次演示。

Popover 什么时候用、什么时候不用？先看任务边界，再看组件外观。

• 什么时候用：用户看完局部说明后仍留在订单页，面板关闭后继续原来的阅读。
• 什么时候不用：需要用户完成确认、填写多个字段或处理错误时，不要把任务藏在轻量说明面板里。

怎么判断：先看用户要完成的任务和内容关系，再选择职责准确的组件。

请使用共享 Popover 组件实现订单页说明入口：点击“查看订单说明”时在入口附近展开“配送说明”，不离开当前页面；支持 Enter、Space 打开，Escape 和关闭按钮收起，并把焦点关系保持清楚。面板内容要适配 320px 宽度，不能用图片坐标、iframe 或手写一张假卡片。