94 lines
3.4 KiB
Vue
94 lines
3.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ElMessage } from 'element-plus';
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
import api from '@/api';
|
||
|
|
import { Key, Copy, Check, Trash2 } from 'lucide-vue-next';
|
||
|
|
|
||
|
|
const apiKeys = ref<any[]>([]);
|
||
|
|
|
||
|
|
const fetchKeys = async () => {
|
||
|
|
try {
|
||
|
|
const res: any = await api.get('/tokens/');
|
||
|
|
apiKeys.value = res;
|
||
|
|
} catch (error) { console.error('Fetch keys failed', error); }
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(fetchKeys);
|
||
|
|
|
||
|
|
const copiedId = ref<string | null>(null);
|
||
|
|
const copyKey = (id: string, key: string) => {
|
||
|
|
navigator.clipboard.writeText(key);
|
||
|
|
copiedId.value = id;
|
||
|
|
ElMessage.success('已复制到剪贴板');
|
||
|
|
setTimeout(() => { copiedId.value = null; }, 2000);
|
||
|
|
};
|
||
|
|
|
||
|
|
const revokeKey = async (id: string) => {
|
||
|
|
try {
|
||
|
|
await api.delete(`/tokens/${id}/`);
|
||
|
|
await fetchKeys();
|
||
|
|
ElMessage.success('凭证已注销');
|
||
|
|
} catch (error) { ElMessage.error('操作失败'); }
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="space-y-5">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-xl font-bold text-gray-800">API 管理</h1>
|
||
|
|
<p class="text-sm text-gray-400">您申请的所有模型访问凭证</p>
|
||
|
|
</div>
|
||
|
|
<router-link to="/user/models">
|
||
|
|
<el-button type="primary">申请新模型</el-button>
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table :data="apiKeys" stripe v-if="apiKeys.length > 0">
|
||
|
|
<el-table-column label="模型" min-width="200">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center text-gray-400">
|
||
|
|
<Key class="w-4 h-4" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="font-semibold">{{ row.model_name }} Access</div>
|
||
|
|
<div class="text-xs text-gray-400">模型: {{ row.model_name }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="状态" width="100">
|
||
|
|
<template #default><el-tag type="success" size="small">Active</el-tag></template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="Token" min-width="280">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<code class="text-xs font-mono text-gray-600 bg-gray-50 px-2 py-1 rounded flex-1 overflow-hidden text-ellipsis">{{ row.token_value }}</code>
|
||
|
|
<el-button text size="small" @click="copyKey(row.id, row.token_value)">
|
||
|
|
<Check v-if="copiedId === row.id" class="w-4 h-4 text-green-500" />
|
||
|
|
<Copy v-else class="w-4 h-4" />
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="创建时间" width="130">
|
||
|
|
<template #default="{ row }">{{ new Date(row.created_at).toLocaleDateString() }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="80" align="center">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-popconfirm title="确定要注销此凭证吗？" @confirm="revokeKey(row.id)">
|
||
|
|
<template #reference>
|
||
|
|
<el-button text type="danger" size="small"><Trash2 class="w-4 h-4" /></el-button>
|
||
|
|
</template>
|
||
|
|
</el-popconfirm>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-empty v-else description="暂无可用凭证" :image-size="80">
|
||
|
|
<el-button type="primary" @click="$router.push('/user/models')">前往模型市场申请</el-button>
|
||
|
|
</el-empty>
|
||
|
|
</div>
|
||
|
|
</template>
|