github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-22 16:43:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/main'

Browse Source
This commit is contained in:
Edric Li
2025-09-06 19:09:59 +08:00
parent 723f13eb2b 8b51c2ef64
commit 3e6edae198
27 changed files with 2153 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/admin-spa/src/assets/styles/global.css
View File

@@ -17,7 +17,7 @@
--bg-gradient-mid: #764ba2;
--bg-gradient-end: #f093fb;
--input-bg: rgba(255, 255, 255, 0.9);
--input-border: rgba(255, 255, 255, 0.3);
--input-border: rgba(209, 213, 219, 0.8);
--modal-bg: rgba(0, 0, 0, 0.4);
--table-bg: rgba(255, 255, 255, 0.95);
--table-hover: rgba(102, 126, 234, 0.05);

441
web/admin-spa/src/components/accounts/AccountForm.vue
View File

@@ -176,7 +176,7 @@
>
<input
v-model="form.name"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.name }"
placeholder="为账户设置一个易识别的名称"
required
@@ -193,7 +193,7 @@
>
<textarea
v-model="form.description"
class="form-input w-full resize-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="账户用途说明..."
rows="3"
/>
@@ -300,7 +300,7 @@
>
<input
v-model="form.projectId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如：verdant-wares-464411-k9"
type="text"
/>
@@ -351,7 +351,7 @@
>
<input
v-model="form.accessKeyId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.accessKeyId }"
placeholder="请输入 AWS Access Key ID"
required
@@ -368,7 +368,7 @@
>
<input
v-model="form.secretAccessKey"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.secretAccessKey }"
placeholder="请输入 AWS Secret Access Key"
required
@@ -385,7 +385,7 @@
>
<input
v-model="form.region"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.region }"
placeholder="例如：us-east-1"
required
@@ -419,7 +419,7 @@
>
<input
v-model="form.sessionToken"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="如果使用临时凭证，请输入会话令牌"
type="password"
/>
@@ -434,7 +434,7 @@
>
<input
v-model="form.defaultModel"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如：us.anthropic.claude-sonnet-4-20250514-v1:0"
type="text"
/>
@@ -463,7 +463,7 @@
>
<input
v-model="form.smallFastModel"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如：us.anthropic.claude-3-5-haiku-20241022-v1:0"
type="text"
/>
@@ -481,7 +481,7 @@
>
<input
v-model="form.azureEndpoint"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.azureEndpoint }"
placeholder="https://your-resource.openai.azure.com"
required
@@ -501,7 +501,7 @@
>
<input
v-model="form.apiVersion"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="2024-02-01"
type="text"
/>
@@ -516,7 +516,7 @@
>
<input
v-model="form.deploymentName"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.deploymentName }"
placeholder="gpt-4"
required
@@ -536,7 +536,7 @@
>
<input
v-model="form.apiKey"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.apiKey }"
placeholder="请输入 Azure OpenAI API Key"
required
@@ -610,7 +610,7 @@
>
<input
v-model.number="form.rateLimitDuration"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="1"
placeholder="默认60分钟"
type="number"
@@ -630,7 +630,7 @@
>
<input
v-model="form.apiUrl"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.apiUrl }"
placeholder="例如：https://api.example.com"
required
@@ -647,7 +647,7 @@
>
<input
v-model="form.apiKey"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.apiKey }"
placeholder="请输入API Key"
required
@@ -658,6 +658,41 @@
</p>
</div>
<!-- 额度管理字段 -->
<div class="grid grid-cols-2 gap-4">
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
每日额度限制 ($)
</label>
<input
v-model.number="form.dailyQuota"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
min="0"
placeholder="0 表示不限制"
step="0.01"
type="number"
/>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
设置每日使用额度，0 表示不限制
</p>
</div>
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
额度重置时间
</label>
<input
v-model="form.quotaResetTime"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
placeholder="00:00"
type="time"
/>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
每日自动重置额度的时间
</p>
</div>
</div>
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>模型映射表 (可选)</label
@@ -678,14 +713,14 @@
>
<input
v-model="mapping.from"
class="form-input flex-1 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="原始模型名称"
type="text"
/>
<i class="fas fa-arrow-right text-gray-400 dark:text-gray-500" />
<input
v-model="mapping.to"
class="form-input flex-1 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="映射后的模型名称"
type="text"
/>
@@ -759,7 +794,7 @@
>
<input
v-model="form.userAgent"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="留空则透传客户端 User-Agent"
type="text"
/>
@@ -792,7 +827,7 @@
>
<input
v-model.number="form.rateLimitDuration"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="1"
placeholder="默认60分钟"
type="number"
@@ -906,7 +941,7 @@
>
<input
v-model.number="form.priority"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
max="100"
min="1"
placeholder="数字越小优先级越高，默认50"
@@ -998,34 +1033,29 @@
</div>
</div>
<!-- OpenAI 平台需要 ID Token -->
<div v-if="form.platform === 'openai'">
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>ID Token *</label
>Access Token (可选)</label
>
<textarea
v-model="form.idToken"
class="form-input w-full resize-none font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.idToken }"
placeholder="请输入 ID Token (JWT 格式)..."
required
v-model="form.accessToken"
class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="可选：如果不填写，系统会自动通过 Refresh Token 获取..."
rows="4"
/>
<p v-if="errors.idToken" class="mt-1 text-xs text-red-500">
{{ errors.idToken }}
</p>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
ID Token 是 OpenAI OAuth 认证返回的 JWT token，包含用户信息和组织信息
<i class="fas fa-info-circle mr-1" />
Access Token 可选填。如果不提供，系统会通过 Refresh Token 自动获取。
</p>
</div>
<div>
<div v-else>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>Access Token *</label
>
<textarea
v-model="form.accessToken"
class="form-input w-full resize-none font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.accessToken }"
placeholder="请输入 Access Token..."
required
@@ -1036,13 +1066,34 @@
</p>
</div>
<div>
<div v-if="form.platform === 'openai'">
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>Refresh Token *</label
>
<textarea
v-model="form.refreshToken"
class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.refreshToken }"
placeholder="请输入 Refresh Token（必填）..."
required
rows="4"
/>
<p v-if="errors.refreshToken" class="mt-1 text-xs text-red-500">
{{ errors.refreshToken }}
</p>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-info-circle mr-1" />
系统将使用 Refresh Token 自动获取 Access Token 和用户信息
</p>
</div>
<div v-else>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>Refresh Token (可选)</label
>
<textarea
v-model="form.refreshToken"
class="form-input w-full resize-none font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="请输入 Refresh Token..."
rows="4"
/>
@@ -1230,7 +1281,7 @@
</label>
<textarea
v-model="setupTokenAuthCode"
class="form-input w-full resize-none font-mono text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 font-mono text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="粘贴从Claude Code授权页面获取的Authorization Code..."
rows="3"
/>
@@ -1278,7 +1329,7 @@
>
<input
v-model="form.name"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="为账户设置一个易识别的名称"
required
type="text"
@@ -1291,7 +1342,7 @@
>
<textarea
v-model="form.description"
class="form-input w-full resize-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="账户用途说明..."
rows="3"
/>
@@ -1398,7 +1449,7 @@
>
<input
v-model="form.projectId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如：verdant-wares-464411-k9"
type="text"
/>
@@ -1509,7 +1560,7 @@
>
<input
v-model.number="form.priority"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
max="100"
min="1"
placeholder="数字越小优先级越高"
@@ -1544,6 +1595,75 @@
<p class="mt-1 text-xs text-gray-500">留空表示不更新 API Key</p>
</div>
<!-- 额度管理字段 -->
<div class="grid grid-cols-2 gap-4">
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
每日额度限制 ($)
</label>
<input
v-model.number="form.dailyQuota"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
min="0"
placeholder="0 表示不限制"
step="0.01"
type="number"
/>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
设置每日使用额度，0 表示不限制
</p>
</div>
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
额度重置时间
</label>
<input
v-model="form.quotaResetTime"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
placeholder="00:00"
type="time"
/>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">每日自动重置额度的时间</p>
</div>
</div>
<!-- 当前使用情况（仅编辑模式显示） -->
<div
v-if="isEdit && form.dailyQuota > 0"
class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-semibold text-gray-700 dark:text-gray-300">
今日使用情况
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">
${{ calculateCurrentUsage().toFixed(4) }} / ${{ form.dailyQuota.toFixed(2) }}
</span>
</div>
<div class="relative h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="absolute left-0 top-0 h-full rounded-full transition-all"
:class="
usagePercentage >= 90
? 'bg-red-500'
: usagePercentage >= 70
? 'bg-yellow-500'
: 'bg-green-500'
"
:style="{ width: `${Math.min(usagePercentage, 100)}%` }"
/>
</div>
<div class="mt-2 flex items-center justify-between text-xs">
<span class="text-gray-500 dark:text-gray-400">
剩余: ${{ Math.max(0, form.dailyQuota - calculateCurrentUsage()).toFixed(2) }}
</span>
<span class="text-gray-500 dark:text-gray-400">
{{ usagePercentage.toFixed(1) }}% 已使用
</span>
</div>
</div>
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700"
>模型映射表 (可选)</label
@@ -1806,7 +1926,7 @@
>
<input
v-model="form.azureEndpoint"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.azureEndpoint }"
placeholder="https://your-resource.openai.azure.com"
type="url"
@@ -1822,7 +1942,7 @@
>
<input
v-model="form.apiVersion"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="2024-02-01"
type="text"
/>
@@ -1837,7 +1957,7 @@
>
<input
v-model="form.deploymentName"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.deploymentName }"
placeholder="gpt-4"
type="text"
@@ -1853,7 +1973,7 @@
>
<input
v-model="form.apiKey"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.apiKey }"
placeholder="留空表示不更新"
type="password"
@@ -1928,7 +2048,7 @@
>
<textarea
v-model="form.accessToken"
class="form-input w-full resize-none font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="留空表示不更新..."
rows="4"
/>
@@ -1940,7 +2060,7 @@
>
<textarea
v-model="form.refreshToken"
class="form-input w-full resize-none font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="留空表示不更新..."
rows="4"
/>
@@ -2076,7 +2196,6 @@ const form = ref({
groupId: '',
groupIds: [],
projectId: props.account?.projectId || '',
idToken: '',
accessToken: '',
refreshToken: '',
proxy: initProxyConfig(),
@@ -2100,6 +2219,10 @@ const form = ref({
userAgent: props.account?.userAgent || '',
enableRateLimit: props.account ? props.account.rateLimitDuration > 0 : true,
rateLimitDuration: props.account?.rateLimitDuration || 60,
// 额度管理字段
dailyQuota: props.account?.dailyQuota || 0,
dailyUsage: props.account?.dailyUsage || 0,
quotaResetTime: props.account?.quotaResetTime || '00:00',
// Bedrock 特定字段
accessKeyId: props.account?.accessKeyId || '',
secretAccessKey: props.account?.secretAccessKey || '',
@@ -2141,7 +2264,7 @@ const initModelMappings = () => {
// 表单验证错误
const errors = ref({
name: '',
idToken: '',
refreshToken: '',
accessToken: '',
apiUrl: '',
apiKey: '',
@@ -2162,6 +2285,45 @@ const canExchangeSetupToken = computed(() => {
return setupTokenAuthUrl.value && setupTokenAuthCode.value.trim()
})
// 获取当前使用量（实时）
const calculateCurrentUsage = () => {
// 如果不是编辑模式或没有账户ID，返回0
if (!isEdit.value || !props.account?.id) {
return 0
}
// 如果已经加载了今日使用数据，直接使用
if (typeof form.value.dailyUsage === 'number') {
return form.value.dailyUsage
}
return 0
}
// 计算额度使用百分比
const usagePercentage = computed(() => {
if (!form.value.dailyQuota || form.value.dailyQuota <= 0) {
return 0
}
const currentUsage = calculateCurrentUsage()
return (currentUsage / form.value.dailyQuota) * 100
})
// 加载账户今日使用情况
const loadAccountUsage = async () => {
if (!isEdit.value || !props.account?.id) return
try {
const response = await apiClient.get(`/admin/claude-console-accounts/${props.account.id}/usage`)
if (response) {
// 更新表单中的使用量数据
form.value.dailyUsage = response.dailyUsage || 0
}
} catch (error) {
console.warn('Failed to load account usage:', error)
}
}
// // 计算是否可以创建
// const canCreate = computed(() => {
// if (form.value.addType === 'manual') {
@@ -2383,7 +2545,35 @@ const handleOAuthSuccess = async (tokenInfo) => {
emit('success', result)
} catch (error) {
showToast(error.message || '账户创建失败', 'error')
// 显示详细的错误信息
const errorMessage = error.response?.data?.error || error.message || '账户创建失败'
const suggestion = error.response?.data?.suggestion || ''
const errorDetails = error.response?.data?.errorDetails || null
// 构建完整的错误提示
let fullMessage = errorMessage
if (suggestion) {
fullMessage += `\n${suggestion}`
}
// 如果有详细的 OAuth 错误信息，也显示出来
if (errorDetails && errorDetails.error_description) {
fullMessage += `\n详细信息: ${errorDetails.error_description}`
} else if (errorDetails && errorDetails.error && errorDetails.error.message) {
// 处理 OpenAI 格式的错误
fullMessage += `\n详细信息: ${errorDetails.error.message}`
}
showToast(fullMessage, 'error', '', 8000)
// 在控制台打印完整的错误信息以便调试
console.error('账户创建失败:', {
message: errorMessage,
suggestion,
errorDetails,
errorCode: error.response?.data?.errorCode,
networkError: error.response?.data?.networkError
})
} finally {
loading.value = false
}
@@ -2444,17 +2634,19 @@ const createAccount = async () => {
}
} else if (form.value.addType === 'manual') {
// 手动模式验证
if (!form.value.accessToken || form.value.accessToken.trim() === '') {
errors.value.accessToken = '请填写 Access Token'
hasError = true
}
// OpenAI 平台需要验证 ID Token
if (
form.value.platform === 'openai' &&
(!form.value.idToken || form.value.idToken.trim() === '')
) {
errors.value.idToken = '请填写 ID Token'
hasError = true
if (form.value.platform === 'openai') {
// OpenAI 平台必须有 Refresh Token
if (!form.value.refreshToken || form.value.refreshToken.trim() === '') {
errors.value.refreshToken = '请填写 Refresh Token'
hasError = true
}
// Access Token 可选，如果没有会通过 Refresh Token 获取
} else {
// 其他平台（Gemini）需要 Access Token
if (!form.value.accessToken || form.value.accessToken.trim() === '') {
errors.value.accessToken = '请填写 Access Token'
hasError = true
}
}
}
@@ -2548,14 +2740,14 @@ const createAccount = async () => {
: 365 * 24 * 60 * 60 * 1000 // 1年
data.openaiOauth = {
idToken: form.value.idToken, // 使用用户输入的 ID Token
accessToken: form.value.accessToken,
refreshToken: form.value.refreshToken || '',
idToken: '', // 不再需要用户输入，系统会自动获取
accessToken: form.value.accessToken || '', // Access Token 可选
refreshToken: form.value.refreshToken, // Refresh Token 必填
expires_in: Math.floor(expiresInMs / 1000) // 转换为秒
}
// 手动模式下，尝试从 ID Token 解析用户信息
let accountInfo = {
// 账户信息将在首次刷新时自动获取
data.accountInfo = {
accountId: '',
chatgptUserId: '',
organizationId: '',
@@ -2566,31 +2758,9 @@ const createAccount = async () => {
emailVerified: false
}
// 尝试解析 ID Token (JWT)
if (form.value.idToken) {
try {
const idTokenParts = form.value.idToken.split('.')
if (idTokenParts.length === 3) {
const payload = JSON.parse(atob(idTokenParts[1]))
const authClaims = payload['https://api.openai.com/auth'] || {}
accountInfo = {
accountId: authClaims.accountId || '',
chatgptUserId: authClaims.chatgptUserId || '',
organizationId: authClaims.organizationId || '',
organizationRole: authClaims.organizationRole || '',
organizationTitle: authClaims.organizationTitle || '',
planType: authClaims.planType || '',
email: payload.email || '',
emailVerified: payload.email_verified || false
}
}
} catch (e) {
console.warn('Failed to parse ID Token:', e)
}
}
data.accountInfo = accountInfo
// OpenAI 手动模式必须刷新以获取完整信息（包括 ID Token）
data.needsImmediateRefresh = true
data.requireRefreshSuccess = true // 必须刷新成功才能创建账户
data.priority = form.value.priority || 50
} else if (form.value.platform === 'claude-console') {
// Claude Console 账户特定数据
@@ -2601,6 +2771,9 @@ const createAccount = async () => {
data.userAgent = form.value.userAgent || null
// 如果不启用限流，传递 0 表示不限流
data.rateLimitDuration = form.value.enableRateLimit ? form.value.rateLimitDuration || 60 : 0
// 额度管理字段
data.dailyQuota = form.value.dailyQuota || 0
data.quotaResetTime = form.value.quotaResetTime || '00:00'
} else if (form.value.platform === 'bedrock') {
// Bedrock 账户特定数据 - 构造 awsCredentials 对象
data.awsCredentials = {
@@ -2647,7 +2820,35 @@ const createAccount = async () => {
emit('success', result)
} catch (error) {
showToast(error.message || '账户创建失败', 'error')
// 显示详细的错误信息
const errorMessage = error.response?.data?.error || error.message || '账户创建失败'
const suggestion = error.response?.data?.suggestion || ''
const errorDetails = error.response?.data?.errorDetails || null
// 构建完整的错误提示
let fullMessage = errorMessage
if (suggestion) {
fullMessage += `\n${suggestion}`
}
// 如果有详细的 OAuth 错误信息，也显示出来
if (errorDetails && errorDetails.error_description) {
fullMessage += `\n详细信息: ${errorDetails.error_description}`
} else if (errorDetails && errorDetails.error && errorDetails.error.message) {
// 处理 OpenAI 格式的错误
fullMessage += `\n详细信息: ${errorDetails.error.message}`
}
showToast(fullMessage, 'error', '', 8000)
// 在控制台打印完整的错误信息以便调试
console.error('账户创建失败:', {
message: errorMessage,
suggestion,
errorDetails,
errorCode: error.response?.data?.errorCode,
networkError: error.response?.data?.networkError
})
} finally {
loading.value = false
}
@@ -2751,11 +2952,17 @@ const updateAccount = async () => {
: 365 * 24 * 60 * 60 * 1000 // 1年
data.openaiOauth = {
idToken: form.value.idToken || '', // 更新时使用用户输入的 ID Token
idToken: '', // 不需要用户输入
accessToken: form.value.accessToken || '',
refreshToken: form.value.refreshToken || '',
expires_in: Math.floor(expiresInMs / 1000) // 转换为秒
}
// 编辑 OpenAI 账户时，如果更新了 Refresh Token，也需要验证
if (form.value.refreshToken && form.value.refreshToken !== props.account.refreshToken) {
data.needsImmediateRefresh = true
data.requireRefreshSuccess = true
}
}
}
@@ -2798,6 +3005,9 @@ const updateAccount = async () => {
data.userAgent = form.value.userAgent || null
// 如果不启用限流，传递 0 表示不限流
data.rateLimitDuration = form.value.enableRateLimit ? form.value.rateLimitDuration || 60 : 0
// 额度管理字段
data.dailyQuota = form.value.dailyQuota || 0
data.quotaResetTime = form.value.quotaResetTime || '00:00'
}
// Bedrock 特定更新
@@ -2859,7 +3069,35 @@ const updateAccount = async () => {
emit('success')
} catch (error) {
showToast(error.message || '账户更新失败', 'error')
// 显示详细的错误信息
const errorMessage = error.response?.data?.error || error.message || '账户更新失败'
const suggestion = error.response?.data?.suggestion || ''
const errorDetails = error.response?.data?.errorDetails || null
// 构建完整的错误提示
let fullMessage = errorMessage
if (suggestion) {
fullMessage += `\n${suggestion}`
}
// 如果有详细的 OAuth 错误信息，也显示出来
if (errorDetails && errorDetails.error_description) {
fullMessage += `\n详细信息: ${errorDetails.error_description}`
} else if (errorDetails && errorDetails.error && errorDetails.error.message) {
// 处理 OpenAI 格式的错误
fullMessage += `\n详细信息: ${errorDetails.error.message}`
}
showToast(fullMessage, 'error', '', 8000)
// 在控制台打印完整的错误信息以便调试
console.error('账户更新失败:', {
message: errorMessage,
suggestion,
errorDetails,
errorCode: error.response?.data?.errorCode,
networkError: error.response?.data?.networkError
})
} finally {
loading.value = false
}
@@ -3207,7 +3445,16 @@ watch(
// Azure OpenAI 特定字段
azureEndpoint: newAccount.azureEndpoint || '',
apiVersion: newAccount.apiVersion || '',
deploymentName: newAccount.deploymentName || ''
deploymentName: newAccount.deploymentName || '',
// 额度管理字段
dailyQuota: newAccount.dailyQuota || 0,
dailyUsage: newAccount.dailyUsage || 0,
quotaResetTime: newAccount.quotaResetTime || '00:00'
}
// 如果是Claude Console账户，加载实时使用情况
if (newAccount.platform === 'claude-console') {
loadAccountUsage()
}
// 如果是分组类型，加载分组ID
@@ -3287,6 +3534,10 @@ const clearUnifiedCache = async () => {
onMounted(() => {
// 获取Claude Code统一User-Agent信息
fetchUnifiedUserAgent()
// 如果是编辑模式且是Claude Console账户，加载使用情况
if (isEdit.value && props.account?.platform === 'claude-console') {
loadAccountUsage()
}
})
// 监听平台变化，当切换到Claude平台时获取统一User-Agent信息

10
web/admin-spa/src/components/accounts/ProxyConfig.vue
View File

@@ -36,7 +36,7 @@
>
<select
v-model="proxy.type"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
<option value="socks5">SOCKS5</option>
<option value="http">HTTP</option>
@@ -51,7 +51,7 @@
>
<input
v-model="proxy.host"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如: 192.168.1.100"
type="text"
/>
@@ -62,7 +62,7 @@
>
<input
v-model="proxy.port"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如: 1080"
type="number"
/>
@@ -92,7 +92,7 @@
>
<input
v-model="proxy.username"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="代理用户名"
type="text"
/>
@@ -104,7 +104,7 @@
<div class="relative">
<input
v-model="proxy.password"
class="form-input w-full pr-10 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 pr-10 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="代理密码"
:type="showPassword ? 'text' : 'password'"
/>

22
web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue
View File

@@ -127,7 +127,7 @@
<div class="flex gap-2">
<input
v-model="newTag"
class="form-input flex-1 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
placeholder="输入新标签名称"
type="text"
@keypress.enter.prevent="addTag"
@@ -166,7 +166,7 @@
</label>
<input
v-model="form.rateLimitWindow"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
min="1"
placeholder="不修改"
type="number"
@@ -179,7 +179,7 @@
>
<input
v-model="form.rateLimitRequests"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
min="1"
placeholder="不修改"
type="number"
@@ -192,7 +192,7 @@
>
<input
v-model="form.rateLimitCost"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
min="0"
placeholder="不修改"
step="0.01"
@@ -210,7 +210,7 @@
</label>
<input
v-model="form.dailyCostLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
min="0"
placeholder="不修改 (0 表示无限制)"
step="0.01"
@@ -225,7 +225,7 @@
</label>
<input
v-model="form.weeklyOpusCostLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
min="0"
placeholder="不修改 (0 表示无限制)"
step="0.01"
@@ -243,7 +243,7 @@
>
<input
v-model="form.concurrencyLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
min="0"
placeholder="不修改 (0 表示无限制)"
type="number"
@@ -330,7 +330,7 @@
>
<select
v-model="form.claudeAccountId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
:disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
>
<option value="">不修改</option>
@@ -365,7 +365,7 @@
>
<select
v-model="form.geminiAccountId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
:disabled="form.permissions === 'claude' || form.permissions === 'openai'"
>
<option value="">不修改</option>
@@ -396,7 +396,7 @@
>
<select
v-model="form.openaiAccountId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
:disabled="form.permissions === 'claude' || form.permissions === 'gemini'"
>
<option value="">不修改</option>
@@ -427,7 +427,7 @@
>
<select
v-model="form.bedrockAccountId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
:disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
>
<option value="">不修改</option>

145
web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
View File

@@ -81,7 +81,7 @@
<div class="flex items-center gap-2">
<input
v-model.number="form.batchCount"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
max="500"
min="2"
placeholder="输入数量 (2-500)"
@@ -112,7 +112,7 @@
>
<input
v-model="form.name"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
:class="{ 'border-red-500': errors.name }"
:placeholder="
form.createType === 'batch'
@@ -184,7 +184,7 @@
<div class="flex gap-2">
<input
v-model="newTag"
class="form-input flex-1 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="输入新标签名称"
type="text"
@keypress.enter.prevent="addTag"
@@ -228,7 +228,7 @@
>
<input
v-model="form.rateLimitWindow"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="1"
placeholder="无限制"
type="number"
@@ -242,7 +242,7 @@
>
<input
v-model="form.rateLimitRequests"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="1"
placeholder="无限制"
type="number"
@@ -256,7 +256,7 @@
>
<input
v-model="form.rateLimitCost"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="无限制"
step="0.01"
@@ -321,7 +321,7 @@
</div>
<input
v-model="form.dailyCostLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="0 表示无限制"
step="0.01"
@@ -370,7 +370,7 @@
</div>
<input
v-model="form.weeklyOpusCostLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="0 表示无限制"
step="0.01"
@@ -388,7 +388,7 @@
>
<input
v-model="form.concurrencyLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="0 表示无限制"
type="number"
@@ -404,7 +404,7 @@
>
<textarea
v-model="form.description"
class="form-input w-full resize-none text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full resize-none border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="描述此 API Key 的用途..."
rows="2"
/>
@@ -412,34 +412,103 @@
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>有效期限</label
>过期设置</label
>
<select
v-model="form.expireDuration"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
@change="updateExpireAt"
<!-- 过期模式选择 -->
<div
class="mb-3 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800"
>
<option value="">永不过期</option>
<option value="1d">1 天</option>
<option value="7d">7 天</option>
<option value="30d">30 天</option>
<option value="90d">90 天</option>
<option value="180d">180 天</option>
<option value="365d">365 天</option>
<option value="custom">自定义日期</option>
</select>
<div v-if="form.expireDuration === 'custom'" class="mt-3">
<input
v-model="form.customExpireDate"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
:min="minDateTime"
type="datetime-local"
@change="updateCustomExpireAt"
/>
<div class="flex items-center gap-4">
<label class="flex cursor-pointer items-center">
<input
v-model="form.expirationMode"
class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
type="radio"
value="fixed"
/>
<span class="text-sm text-gray-700 dark:text-gray-300">固定时间过期</span>
</label>
<label class="flex cursor-pointer items-center">
<input
v-model="form.expirationMode"
class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
type="radio"
value="activation"
/>
<span class="text-sm text-gray-700 dark:text-gray-300">首次使用后激活</span>
</label>
</div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<span v-if="form.expirationMode === 'fixed'">
<i class="fas fa-info-circle mr-1" />
固定时间模式：Key 创建后立即生效，按设定时间过期
</span>
<span v-else>
<i class="fas fa-info-circle mr-1" />
激活模式：Key 首次使用时激活，激活后按设定天数过期（适合批量销售）
</span>
</p>
</div>
<!-- 固定时间模式 -->
<div v-if="form.expirationMode === 'fixed'">
<select
v-model="form.expireDuration"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
@change="updateExpireAt"
>
<option value="">永不过期</option>
<option value="1d">1 天</option>
<option value="7d">7 天</option>
<option value="30d">30 天</option>
<option value="90d">90 天</option>
<option value="180d">180 天</option>
<option value="365d">365 天</option>
<option value="custom">自定义日期</option>
</select>
<div v-if="form.expireDuration === 'custom'" class="mt-3">
<input
v-model="form.customExpireDate"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
:min="minDateTime"
type="datetime-local"
@change="updateCustomExpireAt"
/>
</div>
<p v-if="form.expiresAt" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
将于 {{ formatExpireDate(form.expiresAt) }} 过期
</p>
</div>
<!-- 激活模式 -->
<div v-else>
<div class="flex items-center gap-2">
<input
v-model.number="form.activationDays"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
max="3650"
min="1"
placeholder="输入天数"
type="number"
/>
<span class="text-sm text-gray-600 dark:text-gray-400">天</span>
</div>
<div class="mt-2 flex flex-wrap gap-2">
<button
v-for="days in [30, 90, 180, 365]"
:key="days"
class="rounded-md border border-gray-300 px-3 py-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700"
type="button"
@click="form.activationDays = days"
>
{{ days }}天
</button>
</div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-clock mr-1" />
Key 将在首次使用后激活，激活后 {{ form.activationDays || 30 }} 天过期
</p>
</div>
<p v-if="form.expiresAt" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
将于 {{ formatExpireDate(form.expiresAt) }} 过期
</p>
</div>
<div>
@@ -794,6 +863,8 @@ const form = reactive({
expireDuration: '',
customExpireDate: '',
expiresAt: null,
expirationMode: 'fixed', // 过期模式：fixed(固定) 或 activation(激活)
activationDays: 30, // 激活后有效天数
permissions: 'all',
claudeAccountId: '',
geminiAccountId: '',
@@ -1082,7 +1153,9 @@ const createApiKey = async () => {
form.weeklyOpusCostLimit !== '' && form.weeklyOpusCostLimit !== null
? parseFloat(form.weeklyOpusCostLimit)
: 0,
expiresAt: form.expiresAt || undefined,
expiresAt: form.expirationMode === 'fixed' ? form.expiresAt || undefined : undefined,
expirationMode: form.expirationMode,
activationDays: form.expirationMode === 'activation' ? form.activationDays : undefined,
permissions: form.permissions,
tags: form.tags.length > 0 ? form.tags : undefined,
enableModelRestriction: form.enableModelRestriction,

20
web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
View File

@@ -34,7 +34,7 @@
>
<input
v-model="form.name"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
maxlength="100"
placeholder="请输入API Key名称"
required
@@ -53,7 +53,7 @@
>
<select
v-model="form.ownerId"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
<option v-for="user in availableUsers" :key="user.id" :value="user.id">
{{ user.displayName }} ({{ user.username }})
@@ -122,7 +122,7 @@
<div class="flex gap-2">
<input
v-model="newTag"
class="form-input flex-1 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="输入新标签名称"
type="text"
@keypress.enter.prevent="addTag"
@@ -166,7 +166,7 @@
>
<input
v-model="form.rateLimitWindow"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="1"
placeholder="无限制"
type="number"
@@ -180,7 +180,7 @@
>
<input
v-model="form.rateLimitRequests"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="1"
placeholder="无限制"
type="number"
@@ -194,7 +194,7 @@
>
<input
v-model="form.rateLimitCost"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="无限制"
step="0.01"
@@ -259,7 +259,7 @@
</div>
<input
v-model="form.dailyCostLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="0 表示无限制"
step="0.01"
@@ -308,7 +308,7 @@
</div>
<input
v-model="form.weeklyOpusCostLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="0 表示无限制"
step="0.01"
@@ -326,7 +326,7 @@
>
<input
v-model="form.concurrencyLimit"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
min="0"
placeholder="0 表示无限制"
type="number"
@@ -558,7 +558,7 @@
<div class="flex gap-2">
<input
v-model="form.modelInput"
class="form-input flex-1 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="输入模型名称，按回车添加"
type="text"
@keydown.enter.prevent="addRestrictedModel"

62
web/admin-spa/src/components/apikeys/ExpiryEditModal.vue
View File

@@ -39,11 +39,18 @@
>
<div class="flex items-center justify-between">
<div>
<p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">
当前过期时间
</p>
<p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">当前状态</p>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-200">
<template v-if="apiKey.expiresAt">
<!-- 未激活状态 -->
<template v-if="apiKey.expirationMode === 'activation' && !apiKey.isActivated">
<i class="fas fa-pause-circle mr-1 text-blue-500" />
未激活
<span class="ml-2 text-xs font-normal text-gray-600">
(激活后 {{ apiKey.activationDays || 30 }} 天过期)
</span>
</template>
<!-- 已设置过期时间 -->
<template v-else-if="apiKey.expiresAt">
{{ formatExpireDate(apiKey.expiresAt) }}
<span
v-if="getExpiryStatus(apiKey.expiresAt)"
@@ -53,6 +60,7 @@
({{ getExpiryStatus(apiKey.expiresAt).text }})
</span>
</template>
<!-- 永不过期 -->
<template v-else>
<i class="fas fa-infinity mr-1 text-gray-500" />
永不过期
@@ -74,6 +82,21 @@
</div>
</div>
<!-- 激活按钮（仅在未激活状态显示） -->
<div v-if="apiKey.expirationMode === 'activation' && !apiKey.isActivated" class="mb-4">
<button
class="w-full rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-3 font-semibold text-white transition-all hover:from-blue-600 hover:to-blue-700 hover:shadow-lg"
@click="handleActivateNow"
>
<i class="fas fa-rocket mr-2" />
立即激活 (激活后 {{ apiKey.activationDays || 30 }} 天过期)
</button>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-info-circle mr-1" />
点击立即激活此 API Key，激活后将在 {{ apiKey.activationDays || 30 }} 天后过期
</p>
</div>
<!-- 快捷选项 -->
<div>
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
@@ -115,7 +138,7 @@
>
<input
v-model="localForm.customExpireDate"
class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
:min="minDateTime"
type="datetime-local"
@change="updateCustomExpiryPreview"
@@ -370,6 +393,35 @@ const handleSave = () => {
})
}
// 立即激活
const handleActivateNow = async () => {
// 使用确认弹窗
let confirmed = true
if (window.showConfirm) {
confirmed = await window.showConfirm(
'激活 API Key',
`确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || 30} 天后自动过期。`,
'确定激活',
'取消'
)
} else {
// 降级方案
confirmed = confirm(
`确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || 30} 天后自动过期。`
)
}
if (!confirmed) {
return
}
saving.value = true
emit('save', {
keyId: props.apiKey.id,
activateNow: true
})
}
// 重置保存状态
const resetSaving = () => {
saving.value = false

4
web/admin-spa/src/components/common/AccountSelector.vue
View File

@@ -2,7 +2,7 @@
<div ref="triggerRef" class="relative">
<!-- 选择器主体 -->
<div
class="form-input flex w-full cursor-pointer items-center justify-between dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
class="form-input flex w-full cursor-pointer items-center justify-between border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
:class="{ 'opacity-50': disabled }"
@click="!disabled && toggleDropdown()"
>
@@ -40,7 +40,7 @@
<input
ref="searchInput"
v-model="searchQuery"
class="form-input w-full text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="搜索账号名称..."
style="padding-left: 40px; padding-right: 36px"
type="text"

11
web/admin-spa/src/config/api.js
View File

@@ -82,7 +82,16 @@ class ApiClient {
// 如果响应不成功，抛出错误
if (!response.ok) {
throw new Error(data.message || `HTTP ${response.status}`)
// 创建一个包含完整错误信息的错误对象
const error = new Error(data.message || `HTTP ${response.status}`)
// 保留完整的响应数据，以便错误处理时可以访问详细信息
error.response = {
status: response.status,
data: data
}
// 为了向后兼容，也保留原始的 message
error.message = data.message || error.message
throw error
}
return data

5
web/admin-spa/src/utils/toast.js
View File

@@ -31,6 +31,9 @@ export function showToast(message, type = 'info', title = '', duration = 3000) {
info: 'fas fa-info-circle'
}
// 处理消息中的换行符，转换为 HTML 换行
const formattedMessage = message.replace(/\n/g, '<br>')
toast.innerHTML = `
<div class="flex items-start gap-3">
<div class="flex-shrink-0 mt-0.5">
@@ -38,7 +41,7 @@ export function showToast(message, type = 'info', title = '', duration = 3000) {
</div>
<div class="flex-1 min-w-0">
${title ? `<h4 class="font-semibold text-sm mb-1">${title}</h4>` : ''}
<p class="text-sm opacity-90 leading-relaxed">${message}</p>
<p class="text-sm opacity-90 leading-relaxed">${formattedMessage}</p>
</div>
<button onclick="this.parentElement.parentElement.remove()"
class="flex-shrink-0 text-white/70 hover:text-white transition-colors ml-2">

96
web/admin-spa/src/views/AccountsView.vue
View File

@@ -376,9 +376,11 @@
? 'bg-orange-100 text-orange-800'
: account.status === 'unauthorized'
? 'bg-red-100 text-red-800'
: account.isActive
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
: account.status === 'temp_error'
? 'bg-orange-100 text-orange-800'
: account.isActive
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
]"
>
<div
@@ -388,9 +390,11 @@
? 'bg-orange-500'
: account.status === 'unauthorized'
? 'bg-red-500'
: account.isActive
? 'bg-green-500'
: 'bg-red-500'
: account.status === 'temp_error'
? 'bg-orange-500'
: account.isActive
? 'bg-green-500'
: 'bg-red-500'
]"
/>
{{
@@ -398,9 +402,11 @@
? '已封锁'
: account.status === 'unauthorized'
? '异常'
: account.isActive
? '正常'
: '异常'
: account.status === 'temp_error'
? '临时异常'
: account.isActive
? '正常'
: '异常'
}}
</span>
<span
@@ -578,6 +584,44 @@
</div>
</div>
</div>
<!-- Claude Console: 显示每日额度使用进度 -->
<div v-else-if="account.platform === 'claude-console'" class="space-y-2">
<div v-if="Number(account.dailyQuota) > 0">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-300">额度进度</span>
<span class="font-medium text-gray-700 dark:text-gray-200">
{{ getQuotaUsagePercent(account).toFixed(1) }}%
</span>
</div>
<div class="flex items-center gap-2">
<div class="h-2 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
<div
:class="[
'h-2 rounded-full transition-all duration-300',
getQuotaBarClass(getQuotaUsagePercent(account))
]"
:style="{ width: Math.min(100, getQuotaUsagePercent(account)) + '%' }"
/>
</div>
<span
class="min-w-[32px] text-xs font-medium text-gray-700 dark:text-gray-200"
>
${{ formatCost(account.usage?.daily?.cost || 0) }} / ${{
Number(account.dailyQuota).toFixed(2)
}}
</span>
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">
剩余 ${{ formatRemainingQuota(account) }}
<span class="ml-2 text-gray-400"
>重置 {{ account.quotaResetTime || '00:00' }}</span
>
</div>
</div>
<div v-else class="text-sm text-gray-400">
<i class="fas fa-minus" />
</div>
</div>
<div v-else-if="account.platform === 'claude'" class="text-sm text-gray-400">
<i class="fas fa-minus" />
</div>
@@ -1630,6 +1674,9 @@ const getSchedulableReason = (account) => {
if (account.status === 'unauthorized') {
return '认证失败（401错误）'
}
if (account.status === 'temp_error' && account.errorMessage) {
return account.errorMessage
}
if (account.status === 'error' && account.errorMessage) {
return account.errorMessage
}
@@ -1668,6 +1715,8 @@ const getAccountStatusText = (account) => {
account.rateLimitStatus === 'limited'
)
return '限流中'
// 检查是否临时错误
if (account.status === 'temp_error') return '临时异常'
// 检查是否错误
if (account.status === 'error' || !account.isActive) return '错误'
// 检查是否可调度
@@ -1692,6 +1741,9 @@ const getAccountStatusClass = (account) => {
) {
return 'bg-orange-100 text-orange-800'
}
if (account.status === 'temp_error') {
return 'bg-orange-100 text-orange-800'
}
if (account.status === 'error' || !account.isActive) {
return 'bg-red-100 text-red-800'
}
@@ -1717,6 +1769,9 @@ const getAccountStatusDotClass = (account) => {
) {
return 'bg-orange-500'
}
if (account.status === 'temp_error') {
return 'bg-orange-500'
}
if (account.status === 'error' || !account.isActive) {
return 'bg-red-500'
}
@@ -1771,6 +1826,29 @@ const formatCost = (cost) => {
return cost.toFixed(2)
}
// 额度使用百分比（Claude Console）
const getQuotaUsagePercent = (account) => {
const used = Number(account?.usage?.daily?.cost || 0)
const quota = Number(account?.dailyQuota || 0)
if (!quota || quota <= 0) return 0
return (used / quota) * 100
}
// 额度进度条颜色（Claude Console）
const getQuotaBarClass = (percent) => {
if (percent >= 90) return 'bg-red-500'
if (percent >= 70) return 'bg-yellow-500'
return 'bg-green-500'
}
// 剩余额度（Claude Console）
const formatRemainingQuota = (account) => {
const used = Number(account?.usage?.daily?.cost || 0)
const quota = Number(account?.dailyQuota || 0)
if (!quota || quota <= 0) return '0.00'
return Math.max(0, quota - used).toFixed(2)
}
// 计算每日费用（使用后端返回的精确费用数据）
const calculateDailyCost = (account) => {
if (!account.usage || !account.usage.daily) return '0.0000'

108
web/admin-spa/src/views/ApiKeysView.vue
View File

@@ -244,22 +244,39 @@
<th
class="w-[17%] min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
>
使用统计
<span
class="cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600"
@click="sortApiKeys('cost')"
>
(费用
<i
v-if="apiKeysSortBy === 'cost'"
:class="[
'fas',
apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
'ml-1'
]"
/>
<i v-else class="fas fa-sort ml-1 text-gray-400" />)
</span>
<div class="flex items-center gap-2">
<span>使用统计</span>
<span
class="cursor-pointer rounded px-1.5 py-0.5 text-xs normal-case hover:bg-gray-100 dark:hover:bg-gray-600"
@click="sortApiKeys('dailyCost')"
>
今日费用
<i
v-if="apiKeysSortBy === 'dailyCost'"
:class="[
'fas',
apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
'ml-0.5 text-[10px]'
]"
/>
<i v-else class="fas fa-sort ml-0.5 text-[10px] text-gray-400" />
</span>
<span
class="cursor-pointer rounded px-1.5 py-0.5 text-xs normal-case hover:bg-gray-100 dark:hover:bg-gray-600"
@click="sortApiKeys('totalCost')"
>
总费用
<i
v-if="apiKeysSortBy === 'totalCost'"
:class="[
'fas',
apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
'ml-0.5 text-[10px]'
]"
/>
<i v-else class="fas fa-sort ml-0.5 text-[10px] text-gray-400" />
</span>
</div>
</th>
<th
class="w-[10%] min-w-[90px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
@@ -465,6 +482,12 @@
>${{ (key.dailyCost || 0).toFixed(4) }}</span
>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">总费用</span>
<span class="font-semibold text-blue-600"
>${{ (key.totalCost || 0).toFixed(4) }}</span
>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">最后使用</span>
<span class="font-medium text-gray-700 dark:text-gray-300">{{
@@ -547,7 +570,16 @@
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">
<div class="inline-flex items-center gap-1.5">
<span v-if="key.expiresAt">
<!-- 未激活状态 -->
<span
v-if="key.expirationMode === 'activation' && !key.isActivated"
class="inline-flex items-center text-blue-600 dark:text-blue-400"
>
<i class="fas fa-pause-circle mr-1" />
未激活 ({{ key.activationDays || 30 }}天)
</span>
<!-- 已设置过期时间 -->
<span v-else-if="key.expiresAt">
<span
v-if="isApiKeyExpired(key.expiresAt)"
class="inline-flex items-center text-red-600"
@@ -566,6 +598,7 @@
{{ formatExpireDate(key.expiresAt) }}
</span>
</span>
<!-- 永不过期 -->
<span
v-else
class="inline-flex items-center text-gray-400 dark:text-gray-500"
@@ -1590,8 +1623,8 @@ const apiKeyStatsTimeRange = ref('today')
const activeTab = ref('active')
const deletedApiKeys = ref([])
const deletedApiKeysLoading = ref(false)
const apiKeysSortBy = ref('')
const apiKeysSortOrder = ref('asc')
const apiKeysSortBy = ref('dailyCost')
const apiKeysSortOrder = ref('desc')
const expandedApiKeys = ref({})
const apiKeyModelStats = ref({})
const apiKeyDateFilters = ref({})
@@ -1696,9 +1729,12 @@ const sortedApiKeys = computed(() => {
if (apiKeysSortBy.value === 'status') {
aVal = a.isActive ? 1 : 0
bVal = b.isActive ? 1 : 0
} else if (apiKeysSortBy.value === 'cost') {
aVal = parseFloat(calculateApiKeyCost(a.usage).replace('$', ''))
bVal = parseFloat(calculateApiKeyCost(b.usage).replace('$', ''))
} else if (apiKeysSortBy.value === 'dailyCost') {
aVal = a.dailyCost || 0
bVal = b.dailyCost || 0
} else if (apiKeysSortBy.value === 'totalCost') {
aVal = a.totalCost || 0
bVal = b.totalCost || 0
} else if (apiKeysSortBy.value === 'createdAt' || apiKeysSortBy.value === 'expiresAt') {
aVal = aVal ? new Date(aVal).getTime() : 0
bVal = bVal ? new Date(bVal).getTime() : 0
@@ -1883,13 +1919,6 @@ const formatNumber = (num) => {
return num.toLocaleString('zh-CN')
}
// 计算API Key费用
const calculateApiKeyCost = (usage) => {
if (!usage || !usage.total) return '$0.0000'
const cost = usage.total.cost || 0
return `$${cost.toFixed(4)}`
}
// 获取绑定账户名称
const getBoundAccountName = (accountId) => {
if (!accountId) return '未知账户'
@@ -2631,18 +2660,29 @@ const closeExpiryEdit = () => {
}
// 保存过期时间
const handleSaveExpiry = async ({ keyId, expiresAt }) => {
const handleSaveExpiry = async ({ keyId, expiresAt, activateNow }) => {
try {
const data = await apiClient.put(`/admin/api-keys/${keyId}`, {
expiresAt: expiresAt || null
// 使用新的PATCH端点来修改过期时间
const data = await apiClient.patch(`/admin/api-keys/${keyId}/expiration`, {
expiresAt: expiresAt || null,
activateNow: activateNow || false
})
if (data.success) {
showToast('过期时间已更新', 'success')
showToast(activateNow ? 'API Key已激活' : '过期时间已更新', 'success')
// 更新本地数据
const key = apiKeys.value.find((k) => k.id === keyId)
if (key) {
key.expiresAt = expiresAt || null
if (activateNow && data.updates) {
key.isActivated = true
key.activatedAt = data.updates.activatedAt
key.expiresAt = data.updates.expiresAt
} else {
key.expiresAt = expiresAt || null
if (expiresAt && !key.isActivated) {
key.isActivated = true
}
}
}
closeExpiryEdit()
} else {

278
web/admin-spa/src/views/TutorialView.vue
View File

@@ -420,74 +420,42 @@
</p>
<div class="space-y-4">
<div class="rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
<h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
PowerShell 设置方法
</h6>
<p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
<p class="mb-3 text-sm text-yellow-700">
在
<code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
文件中添加以下配置：
</p>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">
$env:OPENAI_BASE_URL = "{{ openaiBaseUrl }}"
</div>
<div class="whitespace-nowrap text-gray-300">
$env:OPENAI_API_KEY = "你的API密钥"
</div>
<div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
<div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
<div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
<div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
<div class="mt-2"></div>
<div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
<div class="whitespace-nowrap text-gray-300">name = "crs"</div>
<div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
<div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
</div>
<p class="mt-3 text-sm text-yellow-700">
在
<code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
文件中配置API密钥：
</p>
<div
class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">{</div>
<div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
<div class="whitespace-nowrap text-gray-300">}</div>
</div>
<p class="mt-2 text-xs text-yellow-700">
💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
</p>
</div>
<div class="rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
<h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
PowerShell 永久设置（用户级）
</h6>
<p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
<div
class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="mb-2"># 设置用户级环境变量（永久生效）</div>
<div class="whitespace-nowrap text-gray-300">
[System.Environment]::SetEnvironmentVariable("OPENAI_BASE_URL", "{{
openaiBaseUrl
}}", [System.EnvironmentVariableTarget]::User)
</div>
<div class="whitespace-nowrap text-gray-300">
[System.Environment]::SetEnvironmentVariable("OPENAI_API_KEY", "你的API密钥",
[System.EnvironmentVariableTarget]::User)
</div>
</div>
<p class="mt-2 text-xs text-blue-700">
💡 设置后需要重新打开 PowerShell 窗口才能生效。
</p>
</div>
<div class="rounded-lg border border-indigo-200 bg-indigo-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-indigo-800">验证 Codex 环境变量</h6>
<p class="mb-3 text-sm text-indigo-700">在 PowerShell 中验证：</p>
<div
class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">echo $env:OPENAI_BASE_URL</div>
<div class="whitespace-nowrap text-gray-300">echo $env:OPENAI_API_KEY</div>
</div>
</div>
<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-yellow-800">Codex 额外配置</h6>
<p class="mb-3 text-sm text-yellow-700">
需要在
<code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
文件中添加以下配置来禁用响应存储：
</p>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
</div>
</div>
</div>
</div>
</div>
@@ -938,81 +906,42 @@
</p>
<div class="space-y-4">
<div class="rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
<h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
Terminal 设置方法
</h6>
<p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
<p class="mb-3 text-sm text-yellow-700">
在
<code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
文件中添加以下配置：
</p>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">
export OPENAI_BASE_URL="{{ openaiBaseUrl }}"
</div>
<div class="whitespace-nowrap text-gray-300">
export OPENAI_API_KEY="你的API密钥"
</div>
<div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
<div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
<div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
<div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
<div class="mt-2"></div>
<div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
<div class="whitespace-nowrap text-gray-300">name = "crs"</div>
<div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
<div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
</div>
<p class="mt-3 text-sm text-yellow-700">
在
<code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
文件中配置API密钥：
</p>
<div
class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">{</div>
<div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
<div class="whitespace-nowrap text-gray-300">}</div>
</div>
<p class="mt-2 text-xs text-yellow-700">
💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
</p>
</div>
<div class="rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
<h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
永久设置方法
</h6>
<p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
<div
class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="mb-2"># 对于 zsh (默认)</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_BASE_URL="{{ openaiBaseUrl }}"' >> ~/.zshrc
</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_API_KEY="你的API密钥"' >> ~/.zshrc
</div>
<div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
</div>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="mb-2"># 对于 bash</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_BASE_URL="{{ openaiBaseUrl }}"' >> ~/.bash_profile
</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_API_KEY="你的API密钥"' >> ~/.bash_profile
</div>
<div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
</div>
</div>
<div class="rounded-lg border border-indigo-200 bg-indigo-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-indigo-800">验证 Codex 环境变量</h6>
<p class="mb-3 text-sm text-indigo-700">在 Terminal 中验证：</p>
<div
class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">echo $OPENAI_BASE_URL</div>
<div class="whitespace-nowrap text-gray-300">echo $OPENAI_API_KEY</div>
</div>
</div>
<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-yellow-800">Codex 额外配置</h6>
<p class="mb-3 text-sm text-yellow-700">
需要在
<code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
文件中添加以下配置来禁用响应存储：
</p>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
</div>
</div>
</div>
</div>
</div>
@@ -1454,81 +1383,42 @@
</p>
<div class="space-y-4">
<div class="rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
<h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
终端设置方法
</h6>
<p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
<p class="mb-3 text-sm text-yellow-700">
在
<code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
文件中添加以下配置：
</p>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">
export OPENAI_BASE_URL="{{ openaiBaseUrl }}"
</div>
<div class="whitespace-nowrap text-gray-300">
export OPENAI_API_KEY="你的API密钥"
</div>
<div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
<div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
<div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
<div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
<div class="mt-2"></div>
<div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
<div class="whitespace-nowrap text-gray-300">name = "crs"</div>
<div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
<div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
</div>
<p class="mt-3 text-sm text-yellow-700">
在
<code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
文件中配置API密钥：
</p>
<div
class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">{</div>
<div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
<div class="whitespace-nowrap text-gray-300">}</div>
</div>
<p class="mt-2 text-xs text-yellow-700">
💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
</p>
</div>
<div class="rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
<h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
永久设置方法
</h6>
<p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
<div
class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="mb-2"># 对于 bash (默认)</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_BASE_URL="{{ openaiBaseUrl }}"' >> ~/.bashrc
</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_API_KEY="你的API密钥"' >> ~/.bashrc
</div>
<div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
</div>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="mb-2"># 对于 zsh</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_BASE_URL="{{ openaiBaseUrl }}"' >> ~/.zshrc
</div>
<div class="whitespace-nowrap text-gray-300">
echo 'export OPENAI_API_KEY="你的API密钥"' >> ~/.zshrc
</div>
<div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
</div>
</div>
<div class="rounded-lg border border-indigo-200 bg-indigo-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-indigo-800">验证 Codex 环境变量</h6>
<p class="mb-3 text-sm text-indigo-700">在终端中验证：</p>
<div
class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">echo $OPENAI_BASE_URL</div>
<div class="whitespace-nowrap text-gray-300">echo $OPENAI_API_KEY</div>
</div>
</div>
<div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
<h6 class="mb-2 font-medium text-yellow-800">Codex 额外配置</h6>
<p class="mb-3 text-sm text-yellow-700">
需要在
<code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
文件中添加以下配置来禁用响应存储：
</p>
<div
class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
>
<div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
</div>
</div>
</div>
</div>
</div>