TIP

**完成目标：**在 Lovrabet 智能列表页新增一个【调用三方服务测试】按钮。用户点击按钮后，页面调用外部系统测试接口，并在弹窗中展示请求和返回结果。 本文用于“Lovrabet 页面调用外部系统服务”的接入演示，不用于“外部系统调用 Lovrabet OpenAPI”。

一、确认调用场景

<grid> <column width-ratio="0.500000">

TIP

外部系统调用 Lovrabet

例如开柜系统回传开柜状态到 Lovrabet。 这种情况需要开通 Lovrabet OpenAPI，并配置 AccessKey 等鉴权信息。本文不覆盖该方式。

</column> <column width-ratio="0.500000">

TIP

Lovrabet 页面调用外部系统

例如用户在 Lovrabet 页面点击【开柜】【关柜】后，页面调用外部系统接口。 注意：本文仅覆盖该方式，并使用 Apifox Echo 模拟外部系统接口调用。

</column> </grid>

二、查看完成效果

完成后，列表行操作区会出现【调用三方服务测试】按钮。点击按钮后，弹窗展示请求地址、HTTP 状态码、请求体和返回体。

三、准备接入信息

复制开发需求前，先准备下面这些信息。占位符保留通用写法，开发者在自己的电脑上替换为实际值。

信息	填写方式
本地项目路径	<本地项目路径>，例如开发者自己的项目目录。
应用编码	<appCode>，当前 Lovrabet 应用的 appCode。
页面 ID	<pageId>，需要新增按钮的智能列表页 ID。
数据集编码	<datasetCode>，页面绑定的数据集 code。
页面文件	<本地项目路径>/.rabetbase/page/<appCode>/<pageId>-FTP.json
测试接口	https://echo.apifox.com/anything，用于模拟外部系统接口。
浏览器调用条件	外部接口需要支持 HTTPS、公网访问和浏览器 CORS。
鉴权信息	真实 AccessKey、SecretKey、签名密钥不要写入前端代码。

---

四、复制给 Agent 的开发需求

把下面内容复制给本地开发 Agent。复制前，将 <本地项目路径>、<appCode>、<pageId>、<datasetCode> 替换为实际值。

你是 Lovrabet 智能列表页开发助手。请使用 rabetbase CLI 修改智能列表页。

业务目标：
用户在 Lovrabet 列表页点击【调用三方服务测试】后，页面向外部系统测试接口发起 POST 请求，并在弹窗中展示请求和返回结果。

接入参数：
- 本地项目路径：<本地项目路径>
- appCode：<appCode>
- pageId：<pageId>
- 页面文件：<本地项目路径>/.rabetbase/page/<appCode>/<pageId>-FTP.json
- 数据集 code：<datasetCode>
- 测试接口：https://echo.apifox.com/anything

开发要求：
1. 使用 rabetbase CLI 拉取远端最新页面。
2. 确认页面绑定的数据集信息。
3. 在现有行操作区末尾新增按钮【调用三方服务测试】，不影响已有按钮。
4. 按钮点击后读取当前行 rowKey，并作为 cabinetId 写入请求体。
5. 请求方式为 POST，Content-Type 为 application/json。
6. 推送前先执行 page push dry-run，确认无冲突后再正式推送。
8. 回复说明新增按钮、调用效果和推送结果。

请求体示例：
{
  "cabinetId": rowKey,
  "action": "THIRD_PARTY_TEST",
  "source": "Lovrabet",
  "timestamp": 当前时间 ISO 字符串
}

成功后用 Modal.info 展示：
- 请求 URL
- HTTP 状态码
- 请求体
- 返回体

失败后用 Modal.error 展示：
- 错误信息
- 提示检查 CORS、网络可达性和接口状态

请完成：页面拉取、页面修改、page push dry-run、正式 page push，并汇总变更和推送结果。

注意：不建议在前端代码里写真实 AccessKey、SecretKey、签名密钥或客户密钥。

---

五、核心 rabetbase CLI 命令

TIP

下面命令用于拉取页面、确认数据集、预检推送和正式推送。页面修改由开发 Agent 根据上一节需求完成。

rabetbase page pull --id <pageId> --appcode <appCode> --dry-run --format compress
rabetbase page pull --id <pageId> --appcode <appCode> --force --format compress
rabetbase dataset detail --code <datasetCode> --appcode <appCode> --format compress
rabetbase page push --id <pageId> --appcode <appCode> --dry-run --format compress
rabetbase page push --id <pageId> --appcode <appCode> --format compress

---

六、查看按钮行为和 JSAction 参考

按钮完成下面这些动作。下方代码仅作为参考实现，生产环境需要替换为客户自己的合规接口。

• 读取当前行标识 rowKey。
• 向 Apifox Echo 发起 POST 请求。
• 请求成功时展示请求地址、状态码、请求体和返回体。
• 请求失败时提示检查 CORS、网络可达性和接口状态。

(config) => {
  const { Modal, message } = window.antd || {};
  const React = window.React;
  const rowKey = config.extraParams?.rowKey;
  if (!rowKey) { message.warning('请选择一条数据'); return; }

  const endpoint = 'https://echo.apifox.com/anything';
  const payload = {
    cabinetId: rowKey,
    action: 'THIRD_PARTY_TEST',
    source: 'Lovrabet',
    timestamp: new Date().toISOString()
  };

  message.loading({ content: '正在调用三方服务...', key: 'thirdPartyTest', duration: 0 });
  fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  })
    .then(async (response) => {
      const text = await response.text();
      let body;
      try { body = text ? JSON.parse(text) : null; } catch (e) { body = text; }
      if (!response.ok) {
        const err = new Error('HTTP ' + response.status);
        err.responseBody = body;
        throw err;
      }
      return { status: response.status, body };
    })
    .then(({ status, body }) => {
      message.destroy('thirdPartyTest');
      const bodyText = typeof body === 'string' ? body : JSON.stringify(body, null, 2);
      const resultText = 'POST ' + endpoint + '\nHTTP ' + status + '\n\n请求体:\n' + JSON.stringify(payload, null, 2) + '\n\n返回体:\n' + bodyText;
      Modal.info({
        title: '三方服务调用成功',
        width: 720,
        content: React ? React.createElement('pre', { style: { maxHeight: 420, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, resultText) : resultText,
        okText: '确定'
      });
    })
    .catch((err) => {
      message.destroy('thirdPartyTest');
      const errorText = (err?.message || '未知错误') + '\n请检查 CORS、网络可达性和接口状态。';
      Modal.error({
        title: '三方服务调用失败',
        width: 640,
        content: React ? React.createElement('pre', { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, errorText) : errorText,
        okText: '确定'
      });
    });
}

---

七、检查完成结果

• [ ] 页面行操作区可以看到 调用三方服务测试 按钮。

• [ ] 点击按钮后，会向 https://echo.apifox.com/anything 发起 POST 请求。

• [ ] 弹窗展示请求 URL、HTTP 状态码、请求体和返回体。

• [ ] rabetbase page push --dry-run 返回无冲突。

• [ ] 正式 rabetbase page push 执行成功。

---

八、确认生产接入边界

<grid> <column width-ratio="0.500000">

TIP

适合前端直连

• 外部接口支持浏览器 CORS。
• 接口使用公网 HTTPS，页面所在网络可以访问。
• 不需要在前端暴露真实密钥。
• 鉴权 token 是临时、低风险或专门面向浏览器设计的。

</column> <column width-ratio="0.500000">

TIP

不适合前端直连

• 接口需要 AccessKey、SecretKey 或签名密钥。
• 接口在内网，或需要 IP 白名单。
• 三方服务不支持浏览器跨域调用。
• 需要统一审计、重试、脱敏或错误治理。
• 这类情况由客户侧服务端或网关提供合规接口，再供 Lovrabet 页面调用。

</column> </grid>

TIP

生产环境不要把 Lovrabet BFF 当作第三方接口转发代理。 Lovrabet BFF 不支持转发第三方接口，避免被用于恶意转发或绕过第三方系统安全策略。 Apifox Echo 只是测试浏览器端调用、CORS 和请求体结构的工具，不应作为生产接口方案。正式接入时，如果涉及密钥、内网、IP 白名单、复杂鉴权，或第三方接口不支持浏览器跨域调用，应由客户侧服务端或网关提供合规接口。