Initial commit

frontend/src/features/api-keys/components/StandaloneKeyFormDialog.vue

@@ -0,0 +1,416 @@
+<template>
+  <Dialog
+    :model-value="isOpen"
+    size="2xl"
+    @update:model-value="handleDialogUpdate"
+  >
+    <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">
+            <Plus v-if="!isEditMode" class="h-5 w-5 text-primary" />
+            <SquarePen v-else 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">
+              {{ isEditMode ? '编辑独立余额 API Key' : '创建独立余额 API Key' }}
+            </h3>
+            <p class="text-xs text-muted-foreground">
+              {{ isEditMode ? '修改密钥名称、有效期和访问限制' : '用于非注册用户调用接口，不关联用户配额，必须设置余额限制' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="grid grid-cols-2 gap-0">
+        <!-- 左侧：基础设置 -->
+        <div class="pr-6 space-y-4">
+          <div class="flex items-center gap-2 pb-2 border-b border-border/60">
+            <Key class="h-4 w-4 text-muted-foreground" />
+            <span class="text-sm font-medium">基础设置</span>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="form-name" class="text-sm font-medium">密钥名称</Label>
+            <Input
+              id="form-name"
+              v-model="form.name"
+              type="text"
+              placeholder="例如: 用户A专用"
+              class="h-10"
+            />
+          </div>
+
+          <!-- 初始余额 - 仅创建模式显示 -->
+          <div v-if="!isEditMode" class="space-y-2">
+            <Label for="form-balance" class="text-sm font-medium">初始余额 (USD) <span class="text-rose-500">*</span></Label>
+            <Input
+              id="form-balance"
+              :model-value="form.initial_balance_usd ?? ''"
+              type="number"
+              step="0.01"
+              min="0.01"
+              required
+              placeholder="10.00"
+              class="h-10"
+              @update:model-value="(v) => form.initial_balance_usd = parseNumberInput(v, { allowFloat: true }) ?? 10"
+            />
+            <p class="text-xs text-muted-foreground">独立Key必须设置余额限制，最小值 $0.01</p>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="form-expire-days" class="text-sm font-medium">有效期设置</Label>
+            <div class="flex items-center gap-2">
+              <Input
+                id="form-expire-days"
+                :model-value="form.expire_days ?? ''"
+                type="number"
+                min="1"
+                max="3650"
+                placeholder="天数"
+                :class="form.never_expire ? 'flex-1 h-9 opacity-50' : 'flex-1 h-9'"
+                :disabled="form.never_expire"
+                @update:model-value="(v) => form.expire_days = parseNumberInput(v, { min: 1, max: 3650 })"
+              />
+              <label class="flex items-center gap-1.5 border rounded-md px-2 py-1.5 bg-muted/50 cursor-pointer text-xs whitespace-nowrap">
+                <input
+                  v-model="form.never_expire"
+                  type="checkbox"
+                  class="h-3.5 w-3.5 rounded border-gray-300 cursor-pointer"
+                  @change="onNeverExpireChange"
+                />
+                永不过期
+              </label>
+              <label class="flex items-center gap-1.5 border rounded-md px-2 py-1.5 bg-muted/50 cursor-pointer text-xs whitespace-nowrap" :class="form.never_expire ? 'opacity-50' : ''">
+                <input
+                  v-model="form.auto_delete_on_expiry"
+                  type="checkbox"
+                  class="h-3.5 w-3.5 rounded border-gray-300 cursor-pointer"
+                  :disabled="form.never_expire"
+                />
+                到期删除
+              </label>
+            </div>
+            <p class="text-xs text-muted-foreground">不勾选"到期删除"则仅禁用</p>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="form-rate-limit" class="text-sm font-medium">速率限制 (请求/分钟)</Label>
+            <Input
+              id="form-rate-limit"
+              :model-value="form.rate_limit ?? ''"
+              type="number"
+              min="1"
+              max="10000"
+              placeholder="100"
+              class="h-10"
+              @update:model-value="(v) => form.rate_limit = parseNumberInput(v, { min: 1, max: 10000 })"
+            />
+          </div>
+        </div>
+
+        <!-- 右侧：访问限制 -->
+        <div class="pl-6 space-y-4 border-l border-border">
+          <div class="flex items-center gap-2 pb-2 border-b border-border/60">
+            <Shield class="h-4 w-4 text-muted-foreground" />
+            <span class="text-sm font-medium">访问限制</span>
+            <span class="text-xs text-muted-foreground">(留空不限)</span>
+          </div>
+
+          <!-- Provider 多选下拉框 -->
+          <div class="space-y-2">
+            <Label class="text-sm font-medium">允许的 Provider</Label>
+            <div class="relative">
+              <button
+                type="button"
+                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
+                @click="providerDropdownOpen = !providerDropdownOpen"
+              >
+                <span :class="form.allowed_providers.length ? 'text-foreground' : 'text-muted-foreground'">
+                  {{ form.allowed_providers.length ? `已选择 ${form.allowed_providers.length} 个` : '全部可用' }}
+                </span>
+                <ChevronDown class="h-4 w-4 text-muted-foreground transition-transform" :class="providerDropdownOpen ? 'rotate-180' : ''" />
+              </button>
+              <div v-if="providerDropdownOpen" class="fixed inset-0 z-[80]" @click.stop="providerDropdownOpen = false"></div>
+              <div
+                v-if="providerDropdownOpen"
+                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
+              >
+                <div
+                  v-for="provider in providers"
+                  :key="provider.id"
+                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
+                  @click="toggleSelection('allowed_providers', provider.id)"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="form.allowed_providers.includes(provider.id)"
+                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
+                    @click.stop
+                    @change="toggleSelection('allowed_providers', provider.id)"
+                  />
+                  <span class="text-sm">{{ provider.display_name || provider.name }}</span>
+                </div>
+                <div v-if="providers.length === 0" class="px-3 py-2 text-sm text-muted-foreground">
+                  暂无可用 Provider
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- API 格式多选下拉框 -->
+          <div class="space-y-2">
+            <Label class="text-sm font-medium">允许的 API 格式</Label>
+            <div class="relative">
+              <button
+                type="button"
+                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
+                @click="apiFormatDropdownOpen = !apiFormatDropdownOpen"
+              >
+                <span :class="form.allowed_api_formats.length ? 'text-foreground' : 'text-muted-foreground'">
+                  {{ form.allowed_api_formats.length ? `已选择 ${form.allowed_api_formats.length} 个` : '全部可用' }}
+                </span>
+                <ChevronDown class="h-4 w-4 text-muted-foreground transition-transform" :class="apiFormatDropdownOpen ? 'rotate-180' : ''" />
+              </button>
+              <div v-if="apiFormatDropdownOpen" class="fixed inset-0 z-[80]" @click.stop="apiFormatDropdownOpen = false"></div>
+              <div
+                v-if="apiFormatDropdownOpen"
+                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
+              >
+                <div
+                  v-for="format in allApiFormats"
+                  :key="format"
+                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
+                  @click="toggleSelection('allowed_api_formats', format)"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="form.allowed_api_formats.includes(format)"
+                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
+                    @click.stop
+                    @change="toggleSelection('allowed_api_formats', format)"
+                  />
+                  <span class="text-sm">{{ format }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 模型多选下拉框 -->
+          <div class="space-y-2">
+            <Label class="text-sm font-medium">允许的模型</Label>
+            <div class="relative">
+              <button
+                type="button"
+                class="w-full h-10 px-3 border rounded-lg bg-background text-left flex items-center justify-between hover:bg-muted/50 transition-colors"
+                @click="modelDropdownOpen = !modelDropdownOpen"
+              >
+                <span :class="form.allowed_models.length ? 'text-foreground' : 'text-muted-foreground'">
+                  {{ form.allowed_models.length ? `已选择 ${form.allowed_models.length} 个` : '全部可用' }}
+                </span>
+                <ChevronDown class="h-4 w-4 text-muted-foreground transition-transform" :class="modelDropdownOpen ? 'rotate-180' : ''" />
+              </button>
+              <div v-if="modelDropdownOpen" class="fixed inset-0 z-[80]" @click.stop="modelDropdownOpen = false"></div>
+              <div
+                v-if="modelDropdownOpen"
+                class="absolute z-[90] w-full mt-1 bg-popover border rounded-lg shadow-lg max-h-48 overflow-y-auto"
+              >
+                <div
+                  v-for="model in globalModels"
+                  :key="model.name"
+                  class="flex items-center gap-2 px-3 py-2 hover:bg-muted/50 cursor-pointer"
+                  @click="toggleSelection('allowed_models', model.name)"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="form.allowed_models.includes(model.name)"
+                    class="h-4 w-4 rounded border-gray-300 cursor-pointer"
+                    @click.stop
+                    @change="toggleSelection('allowed_models', model.name)"
+                  />
+                  <span class="text-sm">{{ model.name }}</span>
+                </div>
+                <div v-if="globalModels.length === 0" class="px-3 py-2 text-sm text-muted-foreground">
+                  暂无可用模型
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+
+    <template #footer>
+      <Button variant="outline" @click="handleCancel" type="button" class="h-10 px-5">取消</Button>
+      <Button @click="handleSubmit" :disabled="saving" class="h-10 px-5">
+        {{ saving ? (isEditMode ? '更新中...' : '创建中...') : (isEditMode ? '更新' : '创建') }}
+      </Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import {
+  Dialog,
+  Button,
+  Input,
+  Label,
+} from '@/components/ui'
+import { Plus, SquarePen, Key, Shield, ChevronDown } from 'lucide-vue-next'
+import { useFormDialog } from '@/composables/useFormDialog'
+import { getProvidersSummary } from '@/api/endpoints/providers'
+import { getGlobalModels } from '@/api/global-models'
+import { adminApi } from '@/api/admin'
+import { parseNumberInput } from '@/utils/form'
+import type { ProviderWithEndpointsSummary, GlobalModelResponse } from '@/api/endpoints/types'
+
+export interface StandaloneKeyFormData {
+  id?: string
+  name: string
+  initial_balance_usd?: number
+  expire_days?: number
+  never_expire: boolean
+  rate_limit?: number
+  auto_delete_on_expiry: boolean
+  allowed_providers: string[]
+  allowed_api_formats: string[]
+  allowed_models: string[]
+}
+
+const props = defineProps<{
+  open: boolean
+  apiKey: StandaloneKeyFormData | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  submit: [data: StandaloneKeyFormData]
+}>()
+
+const isOpen = computed(() => props.open)
+const saving = ref(false)
+
+// 下拉框状态
+const providerDropdownOpen = ref(false)
+const apiFormatDropdownOpen = ref(false)
+const modelDropdownOpen = ref(false)
+
+// 选项数据
+const providers = ref<ProviderWithEndpointsSummary[]>([])
+const globalModels = ref<GlobalModelResponse[]>([])
+const allApiFormats = ref<string[]>([])
+
+// 表单数据
+const form = ref<StandaloneKeyFormData>({
+  name: '',
+  initial_balance_usd: 10,
+  expire_days: undefined,
+  never_expire: true,
+  rate_limit: 100,
+  auto_delete_on_expiry: false,
+  allowed_providers: [],
+  allowed_api_formats: [],
+  allowed_models: []
+})
+
+function resetForm() {
+  form.value = {
+    name: '',
+    initial_balance_usd: 10,
+    expire_days: undefined,
+    never_expire: true,
+    rate_limit: 100,
+    auto_delete_on_expiry: false,
+    allowed_providers: [],
+    allowed_api_formats: [],
+    allowed_models: []
+  }
+  providerDropdownOpen.value = false
+  apiFormatDropdownOpen.value = false
+  modelDropdownOpen.value = false
+}
+
+function loadKeyData() {
+  if (!props.apiKey) return
+  form.value = {
+    id: props.apiKey.id,
+    name: props.apiKey.name || '',
+    initial_balance_usd: props.apiKey.initial_balance_usd,
+    expire_days: props.apiKey.expire_days,
+    never_expire: props.apiKey.never_expire,
+    rate_limit: props.apiKey.rate_limit || 100,
+    auto_delete_on_expiry: props.apiKey.auto_delete_on_expiry,
+    allowed_providers: props.apiKey.allowed_providers || [],
+    allowed_api_formats: props.apiKey.allowed_api_formats || [],
+    allowed_models: props.apiKey.allowed_models || []
+  }
+}
+
+const { isEditMode, handleDialogUpdate, handleCancel } = useFormDialog({
+  isOpen: () => props.open,
+  entity: () => props.apiKey,
+  isLoading: saving,
+  onClose: () => emit('close'),
+  loadData: loadKeyData,
+  resetForm,
+})
+
+// 加载选项数据
+async function loadAccessRestrictionOptions() {
+  try {
+    const [providersData, modelsData, formatsData] = await Promise.all([
+      getProvidersSummary(),
+      getGlobalModels({ limit: 1000, is_active: true }),
+      adminApi.getApiFormats()
+    ])
+    providers.value = providersData
+    globalModels.value = modelsData.models || []
+    allApiFormats.value = formatsData.formats?.map((f: any) => f.value) || []
+  } catch (err) {
+    console.error('加载访问限制选项失败:', err)
+  }
+}
+
+// 切换选择
+function toggleSelection(field: 'allowed_providers' | 'allowed_api_formats' | 'allowed_models', value: string) {
+  const arr = form.value[field]
+  const index = arr.indexOf(value)
+  if (index === -1) {
+    arr.push(value)
+  } else {
+    arr.splice(index, 1)
+  }
+}
+
+// 永不过期切换
+function onNeverExpireChange() {
+  if (form.value.never_expire) {
+    form.value.expire_days = undefined
+    form.value.auto_delete_on_expiry = false
+  }
+}
+
+// 提交表单
+function handleSubmit() {
+  emit('submit', { ...form.value })
+}
+
+// 设置保存状态
+function setSaving(value: boolean) {
+  saving.value = value
+}
+
+// 监听打开状态，加载选项数据
+watch(isOpen, (val) => {
+  if (val) {
+    loadAccessRestrictionOptions()
+  }
+})
+
+defineExpose({
+  setSaving
+})
+</script>