292 lines
8.8 KiB
Vue
292 lines
8.8 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { useApiKeyStore, MAX_KEYS_PER_USER } from '@/stores/api-key'
|
|||
|
|
import { useUserStore } from '@/stores/user'
|
|||
|
|
import {
|
|||
|
|
PlusOutlined,
|
|||
|
|
CopyOutlined,
|
|||
|
|
DeleteOutlined,
|
|||
|
|
} from '@ant-design/icons-vue'
|
|||
|
|
import type { ApiKeyRecord } from '@/types/api'
|
|||
|
|
import dayjs from 'dayjs'
|
|||
|
|
|
|||
|
|
const apiKeyStore = useApiKeyStore()
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
|
|||
|
|
const apiKeyEnabled = computed(() => userStore.user?.api_key_enabled ?? false)
|
|||
|
|
const hasKeys = computed(() => apiKeyStore.keys.length > 0)
|
|||
|
|
|
|||
|
|
// Create modal
|
|||
|
|
const createModalOpen = ref(false)
|
|||
|
|
const createLoading = ref(false)
|
|||
|
|
const createForm = reactive({
|
|||
|
|
name: '',
|
|||
|
|
expires_at: null as string | null,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Plain key modal
|
|||
|
|
const plainKeyModalOpen = ref(false)
|
|||
|
|
const plainKey = ref('')
|
|||
|
|
|
|||
|
|
function isExpired(record: ApiKeyRecord): boolean {
|
|||
|
|
return !!record.expires_at && dayjs(record.expires_at).isBefore(dayjs())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatTime(time: string | null): string {
|
|||
|
|
if (!time) return '-'
|
|||
|
|
return time.replace('T', ' ').substring(0, 19)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const columns = [
|
|||
|
|
{ title: '名称', dataIndex: 'name', width: 150 },
|
|||
|
|
{ title: '前缀', dataIndex: 'key_prefix', width: 120 },
|
|||
|
|
{ title: '创建时间', dataIndex: 'created_at', width: 170 },
|
|||
|
|
{ title: '过期时间', key: 'expires_at', width: 170 },
|
|||
|
|
{ title: '最后使用', dataIndex: 'last_used_at', width: 170 },
|
|||
|
|
{ title: '状态', key: 'enabled', width: 100 },
|
|||
|
|
{ title: '操作', key: 'action', width: 80 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const readonlyColumns = columns.filter((c) => c.key !== 'enabled' && c.key !== 'action')
|
|||
|
|
|
|||
|
|
function showCreateModal() {
|
|||
|
|
createForm.name = ''
|
|||
|
|
createForm.expires_at = null
|
|||
|
|
createModalOpen.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleCreate() {
|
|||
|
|
if (!createForm.name.trim()) {
|
|||
|
|
message.warning('请输入 API Key 名称')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
createLoading.value = true
|
|||
|
|
try {
|
|||
|
|
const result = await apiKeyStore.createKey({
|
|||
|
|
name: createForm.name.trim(),
|
|||
|
|
expires_at: createForm.expires_at || undefined,
|
|||
|
|
})
|
|||
|
|
if (result) {
|
|||
|
|
createModalOpen.value = false
|
|||
|
|
plainKey.value = result.plain_key
|
|||
|
|
plainKeyModalOpen.value = true
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
createLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleToggle(record: ApiKeyRecord, checked: boolean) {
|
|||
|
|
await apiKeyStore.toggleKey(record.id, checked)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleDelete(record: ApiKeyRecord) {
|
|||
|
|
await apiKeyStore.deleteKey(record.id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleCopyKey() {
|
|||
|
|
navigator.clipboard.writeText(plainKey.value).then(() => {
|
|||
|
|
message.success('已复制')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handlePlainKeyModalClose() {
|
|||
|
|
plainKey.value = ''
|
|||
|
|
plainKeyModalOpen.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
apiKeyStore.fetchMyKeys()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<!-- Mode 3: api_key_enabled=false 且无 Key -->
|
|||
|
|
<a-empty
|
|||
|
|
v-if="!apiKeyEnabled && !hasKeys"
|
|||
|
|
description="API Key 功能未启用，请联系管理员开启"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- Mode 4: api_key_enabled=false 且有 Key — 警告 + 只读表格 -->
|
|||
|
|
<div v-else-if="!apiKeyEnabled && hasKeys">
|
|||
|
|
<a-alert
|
|||
|
|
type="warning"
|
|||
|
|
show-icon
|
|||
|
|
class="mb-4"
|
|||
|
|
message="API Key 功能已被管理员关闭。您的所有 API Key 当前无法用于认证。已有 Key 不会被删除，功能重新开启后将自动恢复。如需开启，请联系管理员。"
|
|||
|
|
/>
|
|||
|
|
<a-table
|
|||
|
|
:columns="readonlyColumns"
|
|||
|
|
:data-source="apiKeyStore.keys"
|
|||
|
|
:loading="apiKeyStore.loading"
|
|||
|
|
:pagination="false"
|
|||
|
|
row-key="id"
|
|||
|
|
:row-class-name="(record: ApiKeyRecord) => isExpired(record) ? 'expired-row' : ''"
|
|||
|
|
size="small"
|
|||
|
|
>
|
|||
|
|
<template #bodyCell="{ column, record }">
|
|||
|
|
<template v-if="column.key === 'expires_at'">
|
|||
|
|
<span v-if="!record.expires_at">永不过期</span>
|
|||
|
|
<span v-else>
|
|||
|
|
<span :class="{ 'text-red-500': isExpired(record) }">
|
|||
|
|
{{ formatTime(record.expires_at) }}
|
|||
|
|
</span>
|
|||
|
|
<a-tag v-if="isExpired(record)" color="red" class="ml-1">已过期</a-tag>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.dataIndex === 'key_prefix'">
|
|||
|
|
{{ record.key_prefix }}****
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.dataIndex === 'created_at'">
|
|||
|
|
{{ formatTime(record.created_at) }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.dataIndex === 'last_used_at'">
|
|||
|
|
{{ record.last_used_at ? formatTime(record.last_used_at) : '从未使用' }}
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mode 2: api_key_enabled=true 且无 Key — 引导空状态 -->
|
|||
|
|
<div v-else-if="apiKeyEnabled && !hasKeys && !apiKeyStore.loading">
|
|||
|
|
<a-empty description="还没有 API Key">
|
|||
|
|
<a-button type="primary" @click="showCreateModal">
|
|||
|
|
<template #icon><PlusOutlined /></template>
|
|||
|
|
生成第一个 API Key
|
|||
|
|
</a-button>
|
|||
|
|
</a-empty>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Mode 1: api_key_enabled=true 且有 Key — 完整面板 -->
|
|||
|
|
<div v-else-if="apiKeyEnabled">
|
|||
|
|
<div class="flex justify-between items-center mb-3">
|
|||
|
|
<a-tag>{{ apiKeyStore.keyCount }}/{{ MAX_KEYS_PER_USER }}</a-tag>
|
|||
|
|
<a-tooltip
|
|||
|
|
v-if="!apiKeyStore.canCreate"
|
|||
|
|
title="已达上限，请删除不需要的 Key 后再生成"
|
|||
|
|
>
|
|||
|
|
<a-button type="primary" disabled>
|
|||
|
|
<template #icon><PlusOutlined /></template>
|
|||
|
|
生成 API Key
|
|||
|
|
</a-button>
|
|||
|
|
</a-tooltip>
|
|||
|
|
<a-button
|
|||
|
|
v-else
|
|||
|
|
type="primary"
|
|||
|
|
@click="showCreateModal"
|
|||
|
|
>
|
|||
|
|
<template #icon><PlusOutlined /></template>
|
|||
|
|
生成 API Key
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a-table
|
|||
|
|
:columns="columns"
|
|||
|
|
:data-source="apiKeyStore.keys"
|
|||
|
|
:loading="apiKeyStore.loading"
|
|||
|
|
:pagination="false"
|
|||
|
|
row-key="id"
|
|||
|
|
:row-class-name="(record: ApiKeyRecord) => isExpired(record) ? 'expired-row' : ''"
|
|||
|
|
size="small"
|
|||
|
|
>
|
|||
|
|
<template #bodyCell="{ column, record }">
|
|||
|
|
<template v-if="column.dataIndex === 'key_prefix'">
|
|||
|
|
{{ record.key_prefix }}****
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.dataIndex === 'created_at'">
|
|||
|
|
{{ formatTime(record.created_at) }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.key === 'expires_at'">
|
|||
|
|
<span v-if="!record.expires_at">永不过期</span>
|
|||
|
|
<span v-else>
|
|||
|
|
<span :class="{ 'text-red-500': isExpired(record) }">
|
|||
|
|
{{ formatTime(record.expires_at) }}
|
|||
|
|
</span>
|
|||
|
|
<a-tag v-if="isExpired(record)" color="red" class="ml-1">已过期</a-tag>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.dataIndex === 'last_used_at'">
|
|||
|
|
{{ record.last_used_at ? formatTime(record.last_used_at) : '从未使用' }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.key === 'enabled'">
|
|||
|
|
<a-switch
|
|||
|
|
:checked="record.enabled"
|
|||
|
|
:disabled="isExpired(record)"
|
|||
|
|
size="small"
|
|||
|
|
@change="(checked: boolean) => handleToggle(record, checked)"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.key === 'action'">
|
|||
|
|
<a-popconfirm
|
|||
|
|
title="确定要删除此 API Key 吗？"
|
|||
|
|
@confirm="handleDelete(record)"
|
|||
|
|
>
|
|||
|
|
<a-button type="link" size="small" danger>
|
|||
|
|
<template #icon><DeleteOutlined /></template>
|
|||
|
|
</a-button>
|
|||
|
|
</a-popconfirm>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Loading state -->
|
|||
|
|
<a-spin v-if="apiKeyStore.loading && !hasKeys && apiKeyEnabled" class="mt-4" />
|
|||
|
|
|
|||
|
|
<!-- Create Modal -->
|
|||
|
|
<a-modal
|
|||
|
|
v-model:open="createModalOpen"
|
|||
|
|
title="生成 API Key"
|
|||
|
|
:confirm-loading="createLoading"
|
|||
|
|
@ok="handleCreate"
|
|||
|
|
>
|
|||
|
|
<a-form layout="vertical">
|
|||
|
|
<a-form-item label="名称" required>
|
|||
|
|
<a-input
|
|||
|
|
v-model:value="createForm.name"
|
|||
|
|
placeholder="例如：数据同步脚本、监控系统"
|
|||
|
|
:maxlength="100"
|
|||
|
|
@press-enter="handleCreate"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="过期时间">
|
|||
|
|
<a-date-picker
|
|||
|
|
v-model:value="createForm.expires_at"
|
|||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|||
|
|
show-time
|
|||
|
|
placeholder="留空表示永不过期"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-form>
|
|||
|
|
</a-modal>
|
|||
|
|
|
|||
|
|
<!-- Plain Key Modal -->
|
|||
|
|
<a-modal
|
|||
|
|
:open="plainKeyModalOpen"
|
|||
|
|
title="API Key 已生成"
|
|||
|
|
:footer="null"
|
|||
|
|
:mask-closable="false"
|
|||
|
|
@cancel="handlePlainKeyModalClose"
|
|||
|
|
>
|
|||
|
|
<a-alert
|
|||
|
|
type="warning"
|
|||
|
|
show-icon
|
|||
|
|
class="mb-4"
|
|||
|
|
message="此密钥仅显示一次，关闭后无法再次查看。请妥善保存。"
|
|||
|
|
/>
|
|||
|
|
<div class="bg-gray-100 p-3 rounded font-mono text-sm break-all select-all mb-3">
|
|||
|
|
{{ plainKey }}
|
|||
|
|
</div>
|
|||
|
|
<a-button type="primary" block @click="handleCopyKey">
|
|||
|
|
<template #icon><CopyOutlined /></template>
|
|||
|
|
复制 API Key
|
|||
|
|
</a-button>
|
|||
|
|
</a-modal>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
:deep(.expired-row) {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
</style>
|