Merge pull request #432 from RWDai/fix/cli-install-copy

Add admin API key CLI install sessions

frontend/src/api/admin.ts

@@ -1,6 +1,7 @@
 import apiClient from './client'
 import { cachedRequest, buildCacheKey } from '@/utils/cache'
 import type { BillingSummary } from './auth'
+import type { ApiKeyInstallSession, InstallSessionTargetSystem, InstallTargetCli } from './me'
 
 // LDAP 配置导出结构
 export interface LDAPConfigExport {
@@ -678,6 +679,18 @@ export const adminApi = {
     return response.data
   },
 
+  // 创建独立余额 Key 的 CLI 安装会话
+  async createApiKeyInstallSession(
+    keyId: string,
+    data: { target_cli: InstallTargetCli; target_system: InstallSessionTargetSystem }
+  ): Promise<ApiKeyInstallSession> {
+    const response = await apiClient.post<ApiKeyInstallSession>(
+      `/api/admin/api-keys/${keyId}/install-sessions`,
+      data
+    )
+    return response.data
+  },
+
   // 系统配置相关
   // 获取所有系统配置
   async getAllSystemConfigs(): Promise<Array<{ key: string; value: unknown; description?: string }>> {

frontend/src/api/me.ts

@@ -173,6 +173,7 @@ export interface ApiKey {
 
 export type InstallTargetCli = 'claude_code' | 'codex_cli' | 'gemini_cli'
 export type InstallTargetSystem = 'macos' | 'linux' | 'windows' | 'auto'
+export type InstallSessionTargetSystem = Exclude<InstallTargetSystem, 'auto'>
 
 export interface ApiKeyInstallSession {
   install_code: string
@@ -287,7 +288,7 @@ export const meApi = {
 
   async createApiKeyInstallSession(
     keyId: string,
-    data: { target_cli: InstallTargetCli; target_system: InstallTargetSystem }
+    data: { target_cli: InstallTargetCli; target_system: InstallSessionTargetSystem }
   ): Promise<ApiKeyInstallSession> {
     const response = await apiClient.post<ApiKeyInstallSession>(
       `/api/users/me/api-keys/${keyId}/install-sessions`,

frontend/src/views/admin/ApiKeys.vue

@@ -317,6 +317,15 @@
                 </TableCell>
                 <TableCell class="py-4">
                   <div class="flex justify-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      class="h-7 w-7"
+                      title="一键安装并配置 CLI"
+                      @click="openInstallDialog(apiKey)"
+                    >
+                      <Terminal class="h-3.5 w-3.5" />
+                    </Button>
                     <Button
                       variant="ghost"
                       size="icon"
@@ -533,6 +542,15 @@
                 </div>
 
                 <div class="grid grid-cols-2 gap-2 pt-0.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    class="h-8 text-xs"
+                    @click="openInstallDialog(apiKey)"
+                  >
+                    <Terminal class="mr-1.5 h-3.5 w-3.5" />
+                    安装
+                  </Button>
                   <Button
                     variant="outline"
                     size="sm"
@@ -652,6 +670,123 @@
       </template>
     </Dialog>
 
+    <!-- 一键安装并配置 CLI 对话框 -->
+    <Dialog
+      v-model="showInstallDialog"
+      size="lg"
+    >
+      <template #header>
+        <div class="border-b border-border px-6 py-4">
+          <div class="flex items-center gap-3">
+            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
+              <Terminal class="h-5 w-5 text-primary" />
+            </div>
+            <div class="flex-1 min-w-0">
+              <h3 class="text-lg font-semibold text-foreground leading-tight">
+                一键安装并配置 CLI
+              </h3>
+              <p class="text-xs text-muted-foreground truncate">
+                当前密钥：{{ selectedInstallApiKey?.name || selectedInstallApiKey?.key_display || '未选择' }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div class="space-y-5">
+        <div class="rounded-lg border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground">
+          选择要配置的 CLI 和目标系统，Aether 会生成 15 分钟内有效的一次性 install code。页面命令不会包含原始 API Key。
+        </div>
+
+        <div class="space-y-2">
+          <Label class="text-sm font-semibold">目标 CLI</Label>
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+            <Button
+              v-for="option in installCliOptions"
+              :key="option.value"
+              :variant="installCli === option.value ? 'default' : 'outline'"
+              class="justify-start h-auto py-3"
+              @click="selectInstallCli(option.value)"
+            >
+              {{ option.label }}
+            </Button>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <Label class="text-sm font-semibold">目标系统</Label>
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+            <Button
+              v-for="option in installSystemOptions"
+              :key="option.value"
+              :variant="installSystem === option.value ? 'default' : 'outline'"
+              class="justify-start h-auto py-3"
+              @click="selectInstallSystem(option.value)"
+            >
+              {{ option.label }}
+            </Button>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between gap-2">
+            <Label class="text-sm font-semibold">复制到目标机器执行</Label>
+            <div class="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                class="gap-1.5"
+                :disabled="installLoading || !installCommand"
+                :title="installCopied ? '已复制' : '一键复制安装命令'"
+                @click="copyInstallCommand"
+              >
+                <CheckCircle
+                  v-if="installCopied"
+                  class="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400"
+                />
+                <Copy
+                  v-else
+                  class="h-3.5 w-3.5"
+                />
+                {{ installCopied ? '已复制' : '一键复制' }}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                :disabled="installLoading || !selectedInstallApiKey"
+                @click="refreshInstallCommand"
+              >
+                {{ installLoading ? '生成中...' : '重新生成' }}
+              </Button>
+            </div>
+          </div>
+          <div class="rounded-lg border border-border/60 bg-background overflow-hidden">
+            <pre class="max-h-32 overflow-x-auto whitespace-pre-wrap break-all p-3 text-xs font-mono">{{ installCommand || '正在生成短命令...' }}</pre>
+          </div>
+          <p class="text-xs text-muted-foreground">
+            {{ installCommandHint }}
+          </p>
+        </div>
+      </div>
+
+      <template #footer>
+        <Button
+          variant="outline"
+          class="h-10 px-5"
+          @click="showInstallDialog = false"
+        >
+          关闭
+        </Button>
+        <Button
+          class="h-10 px-5 shadow-lg shadow-primary/20"
+          :disabled="!installCommand || installLoading"
+          @click="copyInstallCommand"
+        >
+          {{ installCopied ? '已复制' : '复制命令' }}
+        </Button>
+      </template>
+    </Dialog>
+
     <WalletOpsDrawer
       :open="showWalletActionDrawer"
       :wallet="walletActionTarget?.wallet || null"
@@ -667,11 +802,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useToast } from '@/composables/useToast'
 import { useConfirm } from '@/composables/useConfirm'
 import { useClipboard } from '@/composables/useClipboard'
 import { adminApi, type AdminApiKey, type CreateStandaloneApiKeyRequest } from '@/api/admin'
+import type { ApiKeyInstallSession, InstallSessionTargetSystem, InstallTargetCli } from '@/api/me'
 import type { AdminWallet } from '@/api/admin-wallets'
 import { walletStatusBadge, walletStatusLabel } from '@/utils/walletDisplay'
 import WalletOpsDrawer from '@/features/wallet/components/WalletOpsDrawer.vue'
@@ -710,7 +846,8 @@ import {
   Copy,
   CheckCircle,
   SquarePen,
-  Search
+  Search,
+  Terminal
 } from 'lucide-vue-next'
 
 import { StandaloneKeyFormDialog, type StandaloneKeyFormData } from '@/features/api-keys'
@@ -729,8 +866,16 @@ const total = ref(0)
 const currentPage = ref(1)
 const limit = ref(100)
 const showNewKeyDialog = ref(false)
+const showInstallDialog = ref(false)
 const newKeyValue = ref('')
 const keyInput = ref<HTMLInputElement>()
+const selectedInstallApiKey = ref<AdminApiKey | null>(null)
+const installCli = ref<InstallTargetCli>('claude_code')
+const installSystem = ref<InstallSessionTargetSystem>('linux')
+const installSession = ref<ApiKeyInstallSession | null>(null)
+const installLoading = ref(false)
+const installCopied = ref(false)
+let installCopiedResetTimer: ReturnType<typeof setTimeout> | null = null
 
 // 统一的表单对话框状态
 const showKeyFormDialog = ref(false)
@@ -750,6 +895,18 @@ const statusFilters = [
   { value: 'inactive' as const, label: '禁用' }
 ]
 
+const installCliOptions: Array<{ value: InstallTargetCli; label: string }> = [
+  { value: 'claude_code', label: 'Claude Code' },
+  { value: 'codex_cli', label: 'Codex CLI' },
+  { value: 'gemini_cli', label: 'Gemini CLI' }
+]
+
+const installSystemOptions: Array<{ value: InstallSessionTargetSystem; label: string }> = [
+  { value: 'macos', label: 'macOS' },
+  { value: 'linux', label: 'Linux' },
+  { value: 'windows', label: 'Windows' }
+]
+
 const balanceFilters = [
   { value: 'all' as const, label: '全部类型' },
   { value: 'limited' as const, label: '限额' },
@@ -760,6 +917,20 @@ const hasActiveFilters = computed(() => {
   return searchQuery.value !== '' || filterStatus.value !== 'all' || filterBalance.value !== 'all'
 })
 
+const installCommand = computed(() => {
+  if (!installSession.value) return ''
+  return installSystem.value === 'windows'
+    ? installSession.value.powershell_command
+    : installSession.value.unix_command
+})
+
+const installCommandHint = computed(() => {
+  if (installSystem.value === 'windows') {
+    return 'Windows 请在 PowerShell 中执行。install code 使用后立即失效，如需再次执行请重新生成。'
+  }
+  return 'macOS / Linux 请在 sh 兼容终端中执行。install code 使用后立即失效，如需再次执行请重新生成。'
+})
+
 function clearFilters() {
   searchQuery.value = ''
   filterStatus.value = 'all'
@@ -808,9 +979,32 @@ const showWalletActionDrawer = ref(false)
 const walletActionTarget = ref<{ apiKey: AdminApiKey; wallet: AdminWallet } | null>(null)
 
 onMounted(async () => {
+  installSystem.value = detectCurrentSystem()
   await refreshApiKeys()
 })
 
+onBeforeUnmount(() => {
+  resetInstallCopiedState()
+})
+
+watch(showInstallDialog, (isOpen) => {
+  if (!isOpen) {
+    resetInstallCopiedState()
+  }
+})
+
+function clearInstallCopiedResetTimer() {
+  if (installCopiedResetTimer) {
+    clearTimeout(installCopiedResetTimer)
+    installCopiedResetTimer = null
+  }
+}
+
+function resetInstallCopiedState() {
+  clearInstallCopiedResetTimer()
+  installCopied.value = false
+}
+
 function buildAdminWalletFromApiKey(apiKey: AdminApiKey): AdminWallet | null {
   if (!apiKey.wallet?.id) {
     return null
@@ -867,6 +1061,64 @@ function handlePageChange(page: number) {
   refreshApiKeys()
 }
 
+function detectCurrentSystem(): InstallSessionTargetSystem {
+  const platform = window.navigator.platform.toLowerCase()
+  const userAgent = window.navigator.userAgent.toLowerCase()
+  if (platform.includes('mac')) return 'macos'
+  if (platform.includes('win') || userAgent.includes('windows')) return 'windows'
+  return 'linux'
+}
+
+async function openInstallDialog(apiKey: AdminApiKey) {
+  selectedInstallApiKey.value = apiKey
+  installSession.value = null
+  resetInstallCopiedState()
+  showInstallDialog.value = true
+  await refreshInstallCommand()
+}
+
+async function selectInstallCli(value: InstallTargetCli) {
+  installCli.value = value
+  await refreshInstallCommand()
+}
+
+async function selectInstallSystem(value: InstallSessionTargetSystem) {
+  installSystem.value = value
+  await refreshInstallCommand()
+}
+
+async function refreshInstallCommand() {
+  if (!selectedInstallApiKey.value) return
+  installLoading.value = true
+  installSession.value = null
+  resetInstallCopiedState()
+  try {
+    installSession.value = await adminApi.createApiKeyInstallSession(selectedInstallApiKey.value.id, {
+      target_cli: installCli.value,
+      target_system: installSystem.value,
+    })
+  } catch (err: unknown) {
+    log.error('生成 CLI 安装命令失败:', err)
+    error(parseApiError(err, '生成 CLI 安装命令失败'))
+  } finally {
+    installLoading.value = false
+  }
+}
+
+async function copyInstallCommand() {
+  if (!installCommand.value) return
+  const copied = await copyToClipboard(installCommand.value, false)
+  if (!copied) return
+
+  installCopied.value = true
+  success('安装命令已复制到剪贴板')
+  clearInstallCopiedResetTimer()
+  installCopiedResetTimer = setTimeout(() => {
+    installCopied.value = false
+    installCopiedResetTimer = null
+  }, 2000)
+}
+
 async function toggleApiKey(apiKey: AdminApiKey) {
   try {
     const response = await adminApi.toggleApiKey(apiKey.id)
@@ -1063,7 +1315,12 @@ async function copyKeyPrefix(apiKey: AdminApiKey) {
   try {
     // 调用后端 API 获取完整密钥
     const response = await adminApi.getFullApiKey(apiKey.id)
-    await copyToClipboard(response.key)
+    const copied = await copyToClipboard(response.key, false)
+    if (copied) {
+      success('完整密钥已复制到剪贴板')
+    } else {
+      error('复制失败，请手动复制')
+    }
   } catch (err) {
     log.error('复制密钥失败:', err)
     error('复制失败，请重试')

frontend/src/views/user/MyApiKeys.vue

@@ -589,14 +589,34 @@
         <div class="space-y-2">
           <div class="flex items-center justify-between gap-2">
             <Label class="text-sm font-semibold">复制到目标机器执行</Label>
-            <Button
-              variant="ghost"
-              size="sm"
-              :disabled="installLoading || !selectedInstallApiKey"
-              @click="refreshInstallCommand"
-            >
-              {{ installLoading ? '生成中...' : '重新生成' }}
-            </Button>
+            <div class="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                class="gap-1.5"
+                :disabled="installLoading || !installCommand"
+                :title="installCopied ? '已复制' : '一键复制安装命令'"
+                @click="copyInstallCommand"
+              >
+                <CheckCircle
+                  v-if="installCopied"
+                  class="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400"
+                />
+                <Copy
+                  v-else
+                  class="h-3.5 w-3.5"
+                />
+                {{ installCopied ? '已复制' : '一键复制' }}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                :disabled="installLoading || !selectedInstallApiKey"
+                @click="refreshInstallCommand"
+              >
+                {{ installLoading ? '生成中...' : '重新生成' }}
+              </Button>
+            </div>
           </div>
           <div class="rounded-lg border border-border/60 bg-background overflow-hidden">
             <pre class="max-h-32 overflow-x-auto whitespace-pre-wrap break-all p-3 text-xs font-mono">{{ installCommand || '正在生成短命令...' }}</pre>
@@ -618,9 +638,9 @@
         <Button
           class="h-10 px-5 shadow-lg shadow-primary/20"
           :disabled="!installCommand || installLoading"
-          @click="copyTextToClipboard(installCommand)"
+          @click="copyInstallCommand"
         >
-          复制命令
+          {{ installCopied ? '已复制' : '复制命令' }}
         </Button>
       </template>
     </Dialog>
@@ -640,8 +660,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from 'vue'
-import { meApi, type ApiKey, type InstallTargetCli, type InstallTargetSystem, type ApiKeyInstallSession } from '@/api/me'
+import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+import { meApi, type ApiKey, type InstallSessionTargetSystem, type InstallTargetCli, type ApiKeyInstallSession } from '@/api/me'
 import Card from '@/components/ui/card.vue'
 import Button from '@/components/ui/button.vue'
 import Input from '@/components/ui/input.vue'
@@ -674,7 +694,7 @@ const installCliOptions: Array<{ value: InstallTargetCli; label: string }> = [
   { value: 'gemini_cli', label: 'Gemini CLI' }
 ]
 
-const installSystemOptions: Array<{ value: Exclude<InstallTargetSystem, 'auto'>; label: string }> = [
+const installSystemOptions: Array<{ value: InstallSessionTargetSystem; label: string }> = [
   { value: 'macos', label: 'macOS' },
   { value: 'linux', label: 'Linux' },
   { value: 'windows', label: 'Windows' }
@@ -708,9 +728,11 @@ const editingApiKey = ref<ApiKey | null>(null)
 const selectedInstallApiKey = ref<ApiKey | null>(null)
 const pendingFirstInstallApiKey = ref<ApiKey | null>(null)
 const installCli = ref<InstallTargetCli>('claude_code')
-const installSystem = ref<Exclude<InstallTargetSystem, 'auto'>>('linux')
+const installSystem = ref<InstallSessionTargetSystem>('linux')
 const installSession = ref<ApiKeyInstallSession | null>(null)
 const installLoading = ref(false)
+const installCopied = ref(false)
+let installCopiedResetTimer: ReturnType<typeof setTimeout> | null = null
 
 const installCommand = computed(() => {
   if (!installSession.value) return ''
@@ -731,6 +753,16 @@ onMounted(() => {
   loadApiKeys()
 })
 
+onBeforeUnmount(() => {
+  resetInstallCopiedState()
+})
+
+watch(showInstallDialog, (isOpen) => {
+  if (!isOpen) {
+    resetInstallCopiedState()
+  }
+})
+
 watch(showKeyDialog, (isOpen) => {
   if (!isOpen && pendingFirstInstallApiKey.value) {
     closeCreatedKeyDialog()
@@ -756,6 +788,18 @@ async function loadApiKeys() {
   }
 }
 
+function clearInstallCopiedResetTimer() {
+  if (installCopiedResetTimer) {
+    clearTimeout(installCopiedResetTimer)
+    installCopiedResetTimer = null
+  }
+}
+
+function resetInstallCopiedState() {
+  clearInstallCopiedResetTimer()
+  installCopied.value = false
+}
+
 function openEditApiKeyDialog(apiKey: ApiKey) {
   editingApiKey.value = apiKey
   newKeyName.value = apiKey.name || ''
@@ -772,7 +816,7 @@ function openCreateApiKeyDialog() {
   showCreateDialog.value = true
 }
 
-function detectCurrentSystem(): Exclude<InstallTargetSystem, 'auto'> {
+function detectCurrentSystem(): InstallSessionTargetSystem {
   const platform = window.navigator.platform.toLowerCase()
   const userAgent = window.navigator.userAgent.toLowerCase()
   if (platform.includes('mac')) return 'macos'
@@ -783,6 +827,7 @@ function detectCurrentSystem(): Exclude<InstallTargetSystem, 'auto'> {
 async function openInstallDialog(apiKey: ApiKey) {
   selectedInstallApiKey.value = apiKey
   installSession.value = null
+  resetInstallCopiedState()
   showInstallDialog.value = true
   await refreshInstallCommand()
 }
@@ -792,7 +837,7 @@ async function selectInstallCli(value: InstallTargetCli) {
   await refreshInstallCommand()
 }
 
-async function selectInstallSystem(value: Exclude<InstallTargetSystem, 'auto'>) {
+async function selectInstallSystem(value: InstallSessionTargetSystem) {
   installSystem.value = value
   await refreshInstallCommand()
 }
@@ -801,6 +846,7 @@ async function refreshInstallCommand() {
   if (!selectedInstallApiKey.value) return
   installLoading.value = true
   installSession.value = null
+  resetInstallCopiedState()
   try {
     installSession.value = await meApi.createApiKeyInstallSession(selectedInstallApiKey.value.id, {
       target_cli: installCli.value,
@@ -814,6 +860,20 @@ async function refreshInstallCommand() {
   }
 }
 
+async function copyInstallCommand() {
+  if (!installCommand.value) return
+  const copied = await copyTextToClipboard(installCommand.value, false)
+  if (!copied) return
+
+  installCopied.value = true
+  success('安装命令已复制到剪贴板')
+  clearInstallCopiedResetTimer()
+  installCopiedResetTimer = setTimeout(() => {
+    installCopied.value = false
+    installCopiedResetTimer = null
+  }, 2000)
+}
+
 function closeCreatedKeyDialog() {
   showKeyDialog.value = false
   const pending = pendingFirstInstallApiKey.value
@@ -911,19 +971,22 @@ async function copyApiKey(apiKey: ApiKey) {
   try {
     // 调用后端 API 获取完整密钥
     const response = await meApi.getFullApiKey(apiKey.id)
-    await copyTextToClipboard(response.key, false) // 不显示内部提示
-    success('完整密钥已复制到剪贴板')
+    const copied = await copyTextToClipboard(response.key, false) // 不显示内部提示
+    if (copied) {
+      success('完整密钥已复制到剪贴板')
+    }
   } catch (error) {
     log.error('复制密钥失败:', error)
     showError('复制失败，请重试')
   }
 }
 
-async function copyTextToClipboard(text: string, showToast: boolean = true) {
+async function copyTextToClipboard(text: string, showToast: boolean = true): Promise<boolean> {
   try {
     if (navigator.clipboard && window.isSecureContext) {
       await navigator.clipboard.writeText(text)
       if (showToast) success('已复制到剪贴板')
+      return true
     } else {
       const textArea = document.createElement('textarea')
       textArea.value = text
@@ -938,8 +1001,12 @@ async function copyTextToClipboard(text: string, showToast: boolean = true) {
         const successful = document.execCommand('copy')
         if (successful && showToast) {
           success('已复制到剪贴板')
-        } else if (!successful) {
+        }
+        if (successful) {
+          return true
+        } else {
           showError('复制失败，请手动复制')
+          return false
         }
       } finally {
         document.body.removeChild(textArea)
@@ -948,6 +1015,7 @@ async function copyTextToClipboard(text: string, showToast: boolean = true) {
   } catch (error) {
     log.error('复制失败:', error)
     showError('复制失败，请手动选择文本进行复制')
+    return false
   }
 }