mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 09:38:02 +00:00
fix: 优化创建apikey成功弹窗
This commit is contained in:
@@ -99,18 +99,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="flex gap-3">
|
<div class="flex flex-col gap-3 sm:gap-4">
|
||||||
|
<div class="flex flex-col gap-3 sm:flex-row sm:gap-4">
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary flex flex-1 items-center justify-center gap-2 px-6 py-3 font-semibold"
|
class="flex w-full items-center justify-center gap-2 rounded-xl border border-blue-200 bg-blue-50 px-5 py-3 text-sm font-semibold text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100 dark:border-blue-500/50 dark:bg-blue-500/10 dark:text-blue-200 dark:hover:bg-blue-500/20 sm:flex-1 sm:text-base"
|
||||||
@click="copyApiKey"
|
@click="copyKeyOnly"
|
||||||
>
|
>
|
||||||
<i class="fas fa-copy" />
|
<i class="fas fa-key" />
|
||||||
复制配置信息
|
仅复制密钥
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="rounded-xl border border-gray-300 bg-gray-200 px-6 py-3 font-semibold text-gray-800 transition-colors hover:bg-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
|
class="btn btn-primary flex w-full items-center justify-center gap-2 px-5 py-3 text-sm font-semibold sm:flex-1 sm:text-base"
|
||||||
|
@click="copyFullConfig"
|
||||||
|
>
|
||||||
|
<i class="fas fa-copy" />
|
||||||
|
复制Claude配置
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="flex w-full items-center justify-center gap-2 rounded-xl border border-gray-300 bg-gray-200 px-5 py-3 text-sm font-semibold text-gray-800 transition-colors hover:border-gray-400 hover:bg-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 sm:text-base"
|
||||||
@click="handleClose"
|
@click="handleClose"
|
||||||
>
|
>
|
||||||
|
<i class="fas fa-check-circle" />
|
||||||
我已保存
|
我已保存
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -190,8 +200,33 @@ const getDisplayedApiKey = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 复制配置信息(环境变量格式)
|
const droidEndpoint = computed(() => {
|
||||||
const copyApiKey = async () => {
|
return getBaseUrlPrefix() + '/droid/claude'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 通用复制工具,包含降级处理
|
||||||
|
const copyTextWithFallback = async (text, successMessage) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text)
|
||||||
|
showToast(successMessage, 'success')
|
||||||
|
} catch (error) {
|
||||||
|
const textArea = document.createElement('textarea')
|
||||||
|
textArea.value = text
|
||||||
|
document.body.appendChild(textArea)
|
||||||
|
textArea.select()
|
||||||
|
try {
|
||||||
|
document.execCommand('copy')
|
||||||
|
showToast(successMessage, 'success')
|
||||||
|
} catch (fallbackError) {
|
||||||
|
showToast('复制失败,请手动复制', 'error')
|
||||||
|
} finally {
|
||||||
|
document.body.removeChild(textArea)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 复制完整配置(包含提示信息)
|
||||||
|
const copyFullConfig = async () => {
|
||||||
const key = props.apiKey.apiKey || props.apiKey.key || ''
|
const key = props.apiKey.apiKey || props.apiKey.key || ''
|
||||||
if (!key) {
|
if (!key) {
|
||||||
showToast('API Key 不存在', 'error')
|
showToast('API Key 不存在', 'error')
|
||||||
@@ -200,27 +235,22 @@ const copyApiKey = async () => {
|
|||||||
|
|
||||||
// 构建环境变量配置格式
|
// 构建环境变量配置格式
|
||||||
const configText = `ANTHROPIC_BASE_URL="${currentBaseUrl.value}"
|
const configText = `ANTHROPIC_BASE_URL="${currentBaseUrl.value}"
|
||||||
ANTHROPIC_AUTH_TOKEN="${key}"`
|
ANTHROPIC_AUTH_TOKEN="${key}"
|
||||||
|
|
||||||
try {
|
# 提示:如需调用 /droid/claude 端点(已在后台添加 Droid 账号),请将 ANTHROPIC_BASE_URL 改为 "${droidEndpoint.value}" 或根据实际环境调整。`
|
||||||
await navigator.clipboard.writeText(configText)
|
|
||||||
showToast('配置信息已复制到剪贴板', 'success')
|
await copyTextWithFallback(configText, '配置信息已复制到剪贴板')
|
||||||
} catch (error) {
|
}
|
||||||
// console.error('Failed to copy:', error)
|
|
||||||
// 降级方案:创建一个临时文本区域
|
// 仅复制密钥
|
||||||
const textArea = document.createElement('textarea')
|
const copyKeyOnly = async () => {
|
||||||
textArea.value = configText
|
const key = props.apiKey.apiKey || props.apiKey.key || ''
|
||||||
document.body.appendChild(textArea)
|
if (!key) {
|
||||||
textArea.select()
|
showToast('API Key 不存在', 'error')
|
||||||
try {
|
return
|
||||||
document.execCommand('copy')
|
|
||||||
showToast('配置信息已复制到剪贴板', 'success')
|
|
||||||
} catch (fallbackError) {
|
|
||||||
showToast('复制失败,请手动复制', 'error')
|
|
||||||
} finally {
|
|
||||||
document.body.removeChild(textArea)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
await copyTextWithFallback(key, 'API Key 已复制')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭弹窗(带确认)
|
// 关闭弹窗(带确认)
|
||||||
|
|||||||
Reference in New Issue
Block a user