feat(usage): show direct Volcengine key console link in usage panel

The account-level AccessKey is buried in the Volcengine console menus,
so surface a clickable, visible link to the IAM key management page
(https://console.volcengine.com/iam/keymanage) right under the AK/SK
hint. Opens via settingsApi.openExternal; adds the volcengineKeyConsoleLink
label across all four locales.
This commit is contained in:
Jason
2026-06-24 09:57:14 +08:00
parent fdf538e52d
commit 213f55a6d2
5 changed files with 26 additions and 1 deletions
+22 -1
View File
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Play, Wand2, Eye, EyeOff, Save } from "lucide-react";
import { Play, Wand2, Eye, EyeOff, Save, ExternalLink } from "lucide-react";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query";
@@ -31,6 +31,14 @@ import {
} from "@/config/codingPlanProviders";
import { formatUsageDataSummary } from "@/utils/usageDisplay";
/**
* 火山引擎账号级 AccessKey 的密钥管理页(IAM)。
* 用量查询走控制面 OpenAPI,需要 AK/SK 签名,与推理 API Key 是两套凭据,
* 直接给用户一个可点击的直达地址,省得在控制台里翻菜单。
*/
const VOLCENGINE_KEY_CONSOLE_URL =
"https://console.volcengine.com/iam/keymanage";
interface UsageScriptModalProps {
provider: Provider;
appId: AppId;
@@ -1269,6 +1277,19 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
{t("usageScript.volcengineAkSkHint")}
</p>
<p className="text-xs text-muted-foreground mt-1.5">
{t("usageScript.volcengineKeyConsoleLink")}{" "}
<button
type="button"
onClick={() =>
settingsApi.openExternal(VOLCENGINE_KEY_CONSOLE_URL)
}
className="inline-flex items-center gap-1 text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors break-all align-baseline underline-offset-2 hover:underline"
>
{VOLCENGINE_KEY_CONSOLE_URL}
<ExternalLink size={12} className="shrink-0" />
</button>
</p>
</div>
<div className="grid gap-4 md:grid-cols-2">