feat: 优化API Key复制功能,支持一键复制环境变量配置

- 修改"复制 API Key"按钮为"复制配置信息"
- 复制内容包含 ANTHROPIC_BASE_URL 和 ANTHROPIC_AUTH_TOKEN
- 用户无需手动拼接,可直接粘贴使用
- 支持自定义 BASE_URL 配置(通过 VITE_API_BASE_PREFIX 环境变量)
- 自动从浏览器地址获取 BASE_URL(无自定义配置时)
This commit is contained in:
litong.41
2025-10-10 11:49:41 +08:00
parent cffd023239
commit 6b1062caa6

View File

@@ -93,7 +93,7 @@
</div> </div>
</div> </div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400"> <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
点击眼睛图标切换显示模式使用下方按钮复制完整 API Key 点击眼睛图标切换显示模式使用下方按钮复制环境变量配置
</p> </p>
</div> </div>
</div> </div>
@@ -105,7 +105,7 @@
@click="copyApiKey" @click="copyApiKey"
> >
<i class="fas fa-copy" /> <i class="fas fa-copy" />
复制 API 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="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"
@@ -120,7 +120,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, computed } from 'vue'
import { showToast } from '@/utils/toast' import { showToast } from '@/utils/toast'
const props = defineProps({ const props = defineProps({
@@ -134,6 +134,41 @@ const emit = defineEmits(['close'])
const showFullKey = ref(false) const showFullKey = ref(false)
// 获取 API Base URL 前缀
const getBaseUrlPrefix = () => {
// 优先使用环境变量配置的自定义前缀
const customPrefix = import.meta.env.VITE_API_BASE_PREFIX
if (customPrefix) {
// 去除末尾的斜杠
return customPrefix.replace(/\/$/, '')
}
// 否则使用当前浏览器访问地址
if (typeof window !== 'undefined') {
const protocol = window.location.protocol // http: 或 https:
const host = window.location.host // 域名和端口
// 提取协议和主机部分,去除路径
let origin = protocol + '//' + host
// 如果当前URL包含路径只取协议+主机部分
const currentUrl = window.location.href
const pathStart = currentUrl.indexOf('/', 8) // 跳过 http:// 或 https://
if (pathStart !== -1) {
origin = currentUrl.substring(0, pathStart)
}
return origin
}
// 服务端渲染或其他情况的回退
return ''
}
// 计算完整的 API Base URL
const currentBaseUrl = computed(() => {
return getBaseUrlPrefix() + '/api'
})
// 切换密钥可见性 // 切换密钥可见性
const toggleKeyVisibility = () => { const toggleKeyVisibility = () => {
showFullKey.value = !showFullKey.value showFullKey.value = !showFullKey.value
@@ -155,7 +190,7 @@ const getDisplayedApiKey = () => {
} }
} }
// 复制 API Key // 复制配置信息(环境变量格式)
const copyApiKey = async () => { const copyApiKey = async () => {
const key = props.apiKey.apiKey || props.apiKey.key || '' const key = props.apiKey.apiKey || props.apiKey.key || ''
if (!key) { if (!key) {
@@ -163,19 +198,23 @@ const copyApiKey = async () => {
return return
} }
// 构建环境变量配置格式
const configText = `ANTHROPIC_BASE_URL="${currentBaseUrl.value}"
ANTHROPIC_AUTH_TOKEN="${key}"`
try { try {
await navigator.clipboard.writeText(key) await navigator.clipboard.writeText(configText)
showToast('API Key 已复制到剪贴板', 'success') showToast('配置信息已复制到剪贴板', 'success')
} catch (error) { } catch (error) {
// console.error('Failed to copy:', error) // console.error('Failed to copy:', error)
// 降级方案:创建一个临时文本区域 // 降级方案:创建一个临时文本区域
const textArea = document.createElement('textarea') const textArea = document.createElement('textarea')
textArea.value = key textArea.value = configText
document.body.appendChild(textArea) document.body.appendChild(textArea)
textArea.select() textArea.select()
try { try {
document.execCommand('copy') document.execCommand('copy')
showToast('API Key 已复制到剪贴板', 'success') showToast('配置信息已复制到剪贴板', 'success')
} catch (fallbackError) { } catch (fallbackError) {
showToast('复制失败,请手动复制', 'error') showToast('复制失败,请手动复制', 'error')
} finally { } finally {