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">
+1
View File
@@ -1569,6 +1569,7 @@
"accessKeyId": "AccessKey ID",
"secretAccessKey": "SecretAccessKey",
"volcengineAkSkHint": "Volcengine usage query needs an account-level AccessKey ID / Secret (different from the inference API key). Create them in the Volcengine console via the top-right account menu → 'API Access Keys'.",
"volcengineKeyConsoleLink": "Create keys at:",
"defaultPlan": "Default Plan",
"queryFailedMessage": "Query failed",
"queryScript": "Query script (JavaScript)",
+1
View File
@@ -1569,6 +1569,7 @@
"accessKeyId": "AccessKey ID",
"secretAccessKey": "SecretAccessKey",
"volcengineAkSkHint": "Volcengine の使用量照会にはアカウントレベルの AccessKey ID / Secret が必要です(推論 API キーとは別物)。Volcengine コンソール右上のアカウントメニュー →「API アクセスキー」で作成してください。",
"volcengineKeyConsoleLink": "キー作成ページ:",
"defaultPlan": "デフォルトプラン",
"queryFailedMessage": "照会に失敗しました",
"queryScript": "照会スクリプト (JavaScript)",
+1
View File
@@ -1541,6 +1541,7 @@
"accessKeyId": "AccessKey ID",
"secretAccessKey": "SecretAccessKey",
"volcengineAkSkHint": "火山用量查詢需帳號級 AccessKey ID / Secret(與推理 API Key 不同)。請在火山引擎主控台右上角帳號選單 →「API存取金鑰」中建立。",
"volcengineKeyConsoleLink": "金鑰建立網址:",
"defaultPlan": "預設方案",
"queryFailedMessage": "查詢失敗",
"queryScript": "查詢腳本(JavaScript",
+1
View File
@@ -1569,6 +1569,7 @@
"accessKeyId": "AccessKey ID",
"secretAccessKey": "SecretAccessKey",
"volcengineAkSkHint": "火山用量查询需账号级 AccessKey ID / Secret(与推理 API Key 不同)。请在火山引擎控制台右上角账号菜单 →「API访问密钥」中创建。",
"volcengineKeyConsoleLink": "密钥创建地址:",
"defaultPlan": "默认套餐",
"queryFailedMessage": "查询失败",
"queryScript": "查询脚本(JavaScript",