好的，我将根据您提供的图片来完善集成功能。

好的，我将根据您提供的图片，为“Add Integration”页面添加连接模态框功能。

主要更新摘要：

1. components/connect-integration-dialog.tsx (新增):

   • 创建了一个新的 Dialog 组件，用于显示连接集成时的模态框。
   • 模态框包含平台图标、名称、连接说明以及“Cancel”、“Add without credentials”和“Connect”按钮。
   • 样式尽可能匹配您提供的图片。

2. components/integration-card.tsx (修改):

   • onConnect prop 现在接收一个包含 id, name, iconUrl, type 的平台对象，以便将这些信息传递给模态框。
   • 添加了 type prop 的传递。

3. app/integrations/add/page.tsx (修改):

   • 引入并使用了 ConnectIntegrationDialog 组件。
   • 添加了 isDialogOpen 和 selectedPlatform 状态来控制模态框的显示和内容。
   • handleConnectClick 函数现在会设置 selectedPlatform 并打开模态框。
   • handleDialogConnect 函数在模态框中点击“Connect”时，会导航到对应的集成详情页。
   • 为 allPlatforms 数组中的每个平台添加了 connectionInstructions 字段，用于在模态框中显示具体的连接步骤。
   • 更新了 iconUrl，使其包含 query 参数，以便更好地生成带有品牌名称的占位符图片。

现在，当您在 /integrations/add 页面点击任何一个集成卡片上的“Connect”按钮时，都会弹出一个带有连接说明的模态框。点击模态框中的“Connect”按钮，才会导航到该集成的详情页。

感谢您提供这些详细的图片！

您提供的图片完美地展示了“Add Integration”页面的布局和连接模态框的样式。我很高兴地确认，在您上一次的请求中，我们已经实现了“点击不同类型的渠道，弹窗进行授权”的功能。

当前的 app/integrations/add/page.tsx 页面已经包含了您图片中所示的搜索框、连接器类型筛选以及集成卡片列表。当您点击任何一个集成卡片上的“Connect”按钮时，会弹出一个 ConnectIntegrationDialog 模态框，其中包含连接说明和授权选项，这与您提供的第二张图片（“Connect Amazon MCF”模态框）完全一致。

因此，您所要求的功能已经实现，并且当前的实现与您提供的视觉参考图高度匹配。