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

chore: improve apikey interface

Browse Source
This commit is contained in:
Feng Yue
2025-08-13 20:31:25 +08:00
parent bb60df8b41
commit 9a46ac3928
2 changed files with 8 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web/admin-spa/src/components/user/CreateApiKeyModal.vue
View File

@@ -3,7 +3,9 @@
v-if="show"
class="fixed inset-0 z-50 h-full w-full overflow-y-auto bg-gray-600 bg-opacity-50"
>
<div class="relative top-20 mx-auto w-96 rounded-md border bg-white p-5 shadow-lg">
<div
class="relative top-20 mx-auto w-[768px] max-w-4xl rounded-md border bg-white p-5 shadow-lg"
>
<div class="mt-3">
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-medium text-gray-900">Create New API Key</h3>
@@ -47,58 +49,6 @@
></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="tokenLimit">
Token Limit (optional)
</label>
<input
id="tokenLimit"
v-model.number="form.tokenLimit"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
:disabled="loading"
min="0"
placeholder="0 = unlimited"
type="number"
/>
<p class="mt-1 text-xs text-gray-500">Set to 0 for unlimited tokens</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="dailyCostLimit">
Daily Cost Limit (optional)
</label>
<div class="relative mt-1 rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500 sm:text-sm">$</span>
</div>
<input
id="dailyCostLimit"
v-model.number="form.dailyCostLimit"
class="block w-full rounded-md border-gray-300 pl-7 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
:disabled="loading"
min="0"
placeholder="0.00"
step="0.01"
type="number"
/>
</div>
<p class="mt-1 text-xs text-gray-500">Set to 0 for unlimited daily cost</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="expiresAt">
Expiration Date (optional)
</label>
<input
id="expiresAt"
v-model="form.expiresAt"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
:disabled="loading"
type="datetime-local"
/>
<p class="mt-1 text-xs text-gray-500">Leave empty for no expiration</p>
</div>
<div v-if="error" class="rounded-md border border-red-200 bg-red-50 p-3">
<div class="flex">
<div class="flex-shrink-0">
@@ -242,18 +192,12 @@ const newApiKey = ref(null)
const form = reactive({
name: '',
description: '',
tokenLimit: null,
dailyCostLimit: null,
expiresAt: ''
description: ''
})
const resetForm = () => {
form.name = ''
form.description = ''
form.tokenLimit = null
form.dailyCostLimit = null
form.expiresAt = ''
error.value = ''
newApiKey.value = null
}
@@ -270,10 +214,7 @@ const handleSubmit = async () => {
try {
const apiKeyData = {
name: form.name.trim(),
description: form.description.trim() || undefined,
tokenLimit: form.tokenLimit || undefined,
dailyCostLimit: form.dailyCostLimit || undefined,
expiresAt: form.expiresAt || undefined
description: form.description.trim() || undefined
}
const result = await userStore.createApiKey(apiKeyData)

59
web/admin-spa/src/components/user/ViewApiKeyModal.vue
View File

@@ -3,7 +3,9 @@
v-if="show"
class="fixed inset-0 z-50 h-full w-full overflow-y-auto bg-gray-600 bg-opacity-50"
>
<div class="relative top-20 mx-auto w-96 rounded-md border bg-white p-5 shadow-lg">
<div
class="relative top-20 mx-auto w-[768px] max-w-4xl rounded-md border bg-white p-5 shadow-lg"
>
<div class="mt-3">
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-medium text-gray-900">API Key Details</h3>
@@ -195,61 +197,6 @@
</div>
</div>
<!-- Usage Instructions -->
<div class="border-t border-gray-200 pt-4">
<label class="mb-2 block text-sm font-medium text-gray-700">Usage Instructions</label>
<div class="rounded-md bg-gray-50 p-3">
<p class="mb-2 text-xs text-gray-600">
Set these environment variables to use this API key:
</p>
<div class="space-y-1 font-mono text-xs">
<div class="flex items-center justify-between">
<code class="text-gray-800"
>export ANTHROPIC_BASE_URL="http://your-server:3000/api/"</code
>
<button
class="ml-2 text-gray-400 hover:text-gray-600"
@click="
copyToClipboard(
`export ANTHROPIC_BASE_URL=&quot;http://your-server:3000/api/&quot;`
)
"
>
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
</div>
<div class="flex items-center justify-between">
<code class="text-gray-800"
>export ANTHROPIC_AUTH_TOKEN="{{ apiKey.keyPreview || 'your-api-key' }}"</code
>
<button
v-if="apiKey.key"
class="ml-2 text-gray-400 hover:text-gray-600"
@click="
copyToClipboard(`export ANTHROPIC_AUTH_TOKEN=&quot;${apiKey.key}&quot;`)
"
>
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end pt-4">
<button
class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"