@seaart/computing-insufficient-dialog-embed

SeaArt 主算力不足弹框公共包。包负责展示商品、数量选择、限时推荐倒计时和弹框生命周期；调用方负责获取商品、筛选推荐、打开收银台、保存订单状态与埋点上报。

本包不请求接口、不管理登录态，也不包含关闭后的挽留弹框。它使用 Vue 与 Element Plus 作为渲染层。

安装

pnpm add @seaart/computing-insufficient-dialog-embed vue element-plus @element-plus/icons-vue

vue、element-plus 与 @element-plus/icons-vue 是 npm 入口的 peer dependency。浏览器 IIFE 已包含它们，静态页面只需引入一个构建产物。

npm 使用

import { openComputingInsufficientDialog } from '@seaart/computing-insufficient-dialog-embed';

const controller = openComputingInsufficientDialog({
  version: 'v1',
  title: 'Insufficient credits',
  subtitle: 'Credits are valid for 30 days.',
  products: [
    {
      id: 'calculate_100',
      baseCredits: 100,
      bonusCredits: 20,
      price: '$1.99',
      displayGiveRatio: 20,
    },
  ],
  onPurchase({ product, quantity, source }) {
    openCheckout({ productId: product.id, quantity, source });
  },
  onClose({ reason }) {
    console.info(reason);
  },
});

controller.close();

浏览器脚本

<script src="./dist/seaart-computing-insufficient-dialog.global.js"></script>
<script>
  SeaArtComputingInsufficientDialog.open({
    version: 'v1',
    products: window.computingProducts,
    onPurchase({ product, quantity }) {
      openCheckout(product.id, quantity);
    },
  });
</script>

全局对象为 SeaArtComputingInsufficientDialog，其 open 方法等同于 openComputingInsufficientDialog。

初始化参数

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | version | 'v1' \| 'v3' | 否 | 'v1' | 弹框展示版本。v1 为经典浅色卡片，v3 为深色推荐商品弹框。 | | products | ComputingDialogProduct[] | 是 | - | 普通商品数组，按传入顺序渲染。 | | onPurchase | (event) => void \| Promise<void> | 是 | - | 点击购买时触发。返回 Promise 时购买控件保持 loading，直到 Promise 结束。 | | title | string | 否 | 'Insufficient credits' | 已翻译的标题。 | | subtitle | string | 否 | - | 已翻译的说明文字。 | | limitedOffer | ComputingDialogLimitedOffer | 否 | - | 限时推荐商品，显示在普通商品前。 | | otherProducts | ComputingDialogProduct[] | 否 | - | 仅 v3 使用，显示在可展开的“其他面值”区域。 | | anchorProduct | ComputingDialogProduct | 否 | - | 仅 v3 使用，显示在底部锚点购买条。 | | recommendTitle / otherTitle | string | 否 | - | 仅 v3 使用，推荐区和其他面值区的已翻译标题。 | | anchorLabel / anchorButtonText | string | 否 | - | 仅 v3 使用，底部锚点购买条文案。 | | showVideoEstimate | boolean | 否 | false | 仅 v1：是否显示商品的 videoEstimate。 | | totalLabel | string | 否 | 'Total' | 仅 v1：总算力前缀。 | | quantityLabel | string | 否 | 'Quantity' | 数量控件的无障碍标签。 | | closeButtonLabel | string | 否 | 'Close' | 关闭按钮的无障碍文案。 | | decreaseButtonText / increaseButtonText | string | 否 | '-' / '+' | 当前未用于渲染，保留用于历史类型兼容。 | | getPurchaseButtonText | (event) => string | 否 | 商品价格 | v1、v3 通用的购买按钮文案格式化函数。 | | onClose | ({ reason }) => void | 否 | - | 弹框移除后触发。 | | onLimitedOfferExpired | (product) => void | 否 | - | 仅 v1：限时商品到期并从弹框移除时触发。 | | onTrack | (event) => void | 否 | - | 展示、购买、关闭时触发；limited-offer-expired 仅 v1 触发。包本身不发送埋点。 | | className | string | 否 | - | 添加到最外层 overlay 的自定义 class。 |

V1 与 V3 参数兼容性

两个版本共用商品基础数据、购买回调和弹框生命周期参数。调用方应只传递目标版本会展示的扩展字段，避免误以为被忽略的字段已经生效。

| 参数 | V1 | V3 | 说明 | | --- | --- | --- | --- | | products、title、subtitle、onPurchase、onClose、onTrack、className | 支持 | 支持 | 两个版本的基础契约。 | | limitedOffer | 支持 | 支持 | V1 使用经典限时卡片；V3 使用首张高亮推荐卡和顶部倒计时。 | | getPurchaseButtonText | 支持 | 支持 | 回调中会收到当前商品、数量和来源。 | | quantityLabel、closeButtonLabel | 支持 | 支持 | 仅无障碍文案，不影响界面展示。 | | otherProducts | 忽略 | 支持 | V3 的可展开“其他面值”区域。 | | anchorProduct、anchorLabel、anchorButtonText | 忽略 | 支持 | V3 底部锚点购买条。 | | recommendTitle、otherTitle | 忽略 | 支持 | V3 推荐区和其他面值区标题。 | | showVideoEstimate、videoEstimate | 支持 | 忽略 | V1 购买按钮下方的预计产出文案。 | | totalLabel | 支持 | 忽略 | V1 算力总数前缀。 | | originalPrice、formatOriginalPrice | 支持 | 忽略 | V1 的划线原价。 | | countdownLabel | 支持 | 忽略 | V3 倒计时只显示时间。 | | icon、unitPriceText | 忽略 | 支持 | V3 商品图标和单价说明。未传 icon 时使用默认算力图标。 | | decreaseButtonText、increaseButtonText | 忽略 | 忽略 | 当前使用固定减号、加号图标；这两个历史参数仅保留类型兼容。 | | onLimitedOfferExpired | 支持 | 忽略 | V3 当前仅移除已过期商品，不触发该回调。 |

商品数据结构

products 和 limitedOffer 必须由调用方将接口数据转换为以下展示模型。公共包不会调用算力商品接口，也不会按主站规则筛选商品。

type ComputingDialogProduct = {
  id: string;
  baseCredits: number;
  bonusCredits?: number;
  totalCredits?: number;
  price: string;
  originalPrice?: string;
  displayGiveRatio?: number;
  quantity?: number;
  minQuantity?: number;
  maxQuantity?: number;
  badge?: string;
  videoEstimate?: string;
};

type ComputingDialogLimitedOffer = ComputingDialogProduct & {
  expiresAt: number;
  countdownLabel?: string;
};

| 字段 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | id | string | 是 | SKU 或商品 ID，原样回传给 onPurchase。 | | baseCredits | number | 是 | 单件基础算力。 | | bonusCredits | number | 否 | 单件赠送算力。 | | totalCredits | number | 否 | 单件总算力；未传时为 baseCredits + bonusCredits。 | | price | string | 是 | 已格式化的单件价格，例如 $4.99。 | | formatPrice | (quantity: number) => string | 否 | 按当前数量返回已格式化总价；传入后会覆盖 price 的展示。 | | originalPrice | string | 否 | 仅 v1：划线原价。 | | formatOriginalPrice | (quantity: number) => string | 否 | 仅 v1：按当前数量返回已格式化划线原价。 | | displayGiveRatio | number | 否 | 仅展示的赠送比例，不含 %。 | | quantity | number | 否 | 初始数量，默认 1。 | | minQuantity / maxQuantity | number | 否 | 数量范围，默认 1 到 99。 | | badge | string | 否 | 普通商品卡角标。 | | videoEstimate | string | 否 | 仅 v1：视频场景下的已翻译预计产出。 | | icon | string | 否 | 商品图标 URL；v3 未传时使用默认算力图标。 | | unitPriceText | string | 否 | v3 商品卡的已翻译单价说明，例如 1R$≈197。 | | expiresAt | number | 限时商品必填 | Unix 毫秒时间戳；到期后卡片会移除。 | | countdownLabel | string | 否 | 仅 v1：限时商品倒计时前缀。 |

回调与控制器

onPurchase 接收：

| 字段 | 类型 | 说明 | | --- | --- | --- | | product | ComputingDialogProduct | 当前商品展示模型。 | | quantity | number | 当前用户选择的数量。 | | source | 'standard' \| 'limited-offer' \| 'other' \| 'anchor' | 商品来源。other 和 anchor 仅 v3 产生。 |

onClose 的 reason 为 'close-button' 或 'api'。onTrack 的 type 为 'exposure'、'purchase'、'close'；'limited-offer-expired' 仅 v1 产生。

打开后返回 ComputingInsufficientDialogController：

| 方法 | 说明 | | --- | --- | | close() | 关闭并移除弹框，随后触发 onClose({ reason: 'api' })。 |

接入边界

当前主站 VipComputingDialog.vue 会获取算力商品、按推荐接口选择三档商品、计算 recommend_calculate、处理待支付订单，并通过 PaymentForm 打开收银台。这些均由调用方实现：

const products = mapCalculateProducts(response.data.calculate);

openComputingInsufficientDialog({
  products,
  limitedOffer: mapLimitedOffer(recommendation),
  onPurchase({ product, quantity, source }) {
    openCheckout({
      productId: product.id,
      quantity,
      discountType: source === 'limited-offer' ? 'recommend_calculate' : undefined,
    });
  },
});

调用方也负责多语言文案、登录态校验、支付成功后的刷新、灰度策略和业务埋点字段。

测试与构建

pnpm --filter @seaart/computing-insufficient-dialog-embed typecheck
pnpm --filter @seaart/computing-insufficient-dialog-embed test
pnpm --filter @seaart/computing-insufficient-dialog-embed build

License

UNLICENSED