From 9a46ac3928ab294ec94d6f3c2b2703c44ad5bc66 Mon Sep 17 00:00:00 2001
From: Feng Yue <2525275@gmail.com>
Date: Wed, 13 Aug 2025 20:31:25 +0800
Subject: [PATCH] chore: improve apikey interface

---
 .../src/components/user/CreateApiKeyModal.vue | 69 ++-----------------
 .../src/components/user/ViewApiKeyModal.vue   | 59 +---------------
 2 files changed, 8 insertions(+), 120 deletions(-)

diff --git a/web/admin-spa/src/components/user/CreateApiKeyModal.vue b/web/admin-spa/src/components/user/CreateApiKeyModal.vue
index 38b97261..a752d7c6 100644
--- a/web/admin-spa/src/components/user/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/user/CreateApiKeyModal.vue
@@ -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)
diff --git a/web/admin-spa/src/components/user/ViewApiKeyModal.vue b/web/admin-spa/src/components/user/ViewApiKeyModal.vue
index e1daec3d..bcd316c7 100644
--- a/web/admin-spa/src/components/user/ViewApiKeyModal.vue
+++ b/web/admin-spa/src/components/user/ViewApiKeyModal.vue
@@ -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"