github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 09:38:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Codex账号管理优化与API Key激活机制

Browse Source 
✨ 新功能
- 支持通过refreshToken新增Codex账号，创建时立即验证token有效性
- API Key新增首次使用自动激活机制，支持activation模式设置有效期
- 前端账号表单增加token验证功能，确保账号创建成功

🐛 修复
- 修复Codex token刷新失败问题，增加分布式锁防止并发刷新
- 优化token刷新错误处理，提供更详细的错误信息和建议
- 修复OpenAI账号token过期检测和自动刷新逻辑

📝 文档更新
- 更新README中Codex使用说明，改为config.toml配置方式
- 优化Cherry Studio等第三方工具接入文档
- 添加详细的配置示例和账号类型说明

🎨 界面优化
- 改进账号创建表单UI，支持手动和OAuth两种模式
- 优化API Key过期时间编辑弹窗，支持激活操作
- 调整教程页面布局，提升移动端响应式体验

💡 代码改进
- 重构token刷新服务，增强错误处理和重试机制
- 优化代理配置处理，确保OAuth请求正确使用代理
- 改进webhook通知，增加token刷新失败告警
This commit is contained in:
shaw
2025-09-06 17:39:05 +08:00
parent 0e746b1056
commit d2f3f6866c
19 changed files with 1231 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
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
@@ -666,7 +666,7 @@
</label>
<input
v-model.number="form.dailyQuota"
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="0"
placeholder="0 表示不限制"
step="0.01"
@@ -683,7 +683,7 @@
</label>
<input
v-model="form.quotaResetTime"
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"
placeholder="00:00"
type="time"
/>
@@ -713,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"
/>
@@ -794,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"
/>
@@ -827,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"
@@ -941,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"
@@ -1033,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
@@ -1071,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"
/>
@@ -1265,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"
/>
@@ -1313,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"
@@ -1326,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"
/>
@@ -1433,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"
/>
@@ -1544,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="数字越小优先级越高"
@@ -1587,7 +1603,7 @@
</label>
<input
v-model.number="form.dailyQuota"
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="0"
placeholder="0 表示不限制"
step="0.01"
@@ -1604,7 +1620,7 @@
</label>
<input
v-model="form.quotaResetTime"
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"
placeholder="00:00"
type="time"
/>
@@ -1910,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"
@@ -1926,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"
/>
@@ -1941,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"
@@ -1957,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"
@@ -2032,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"
/>
@@ -2044,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"
/>
@@ -2180,7 +2196,6 @@ const form = ref({
groupId: '',
groupIds: [],
projectId: props.account?.projectId || '',
idToken: '',
accessToken: '',
refreshToken: '',
proxy: initProxyConfig(),
@@ -2249,7 +2264,7 @@ const initModelMappings = () => {
// 表单验证错误
const errors = ref({
name: '',
idToken: '',
refreshToken: '',
accessToken: '',
apiUrl: '',
apiKey: '',
@@ -2530,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
}
@@ -2591,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
}
}
}
@@ -2695,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: '',
@@ -2713,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 账户特定数据
@@ -2797,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
}
@@ -2901,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
}
}
}
@@ -3012,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
}

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"