82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<template>
|
|
<div class="api-container">
|
|
<el-card>
|
|
<template #header>
|
|
<span>API 管理</span>
|
|
</template>
|
|
|
|
<el-alert
|
|
title="API 密钥"
|
|
type="info"
|
|
:closable="false"
|
|
style="margin-bottom: 20px"
|
|
>
|
|
<p>您的 API 密钥: <el-tag>{{ apiKey }}</el-tag></p>
|
|
<el-button size="small" type="primary" @click="regenerateKey" style="margin-top: 10px">
|
|
重新生成密钥
|
|
</el-button>
|
|
</el-alert>
|
|
|
|
<el-divider />
|
|
|
|
<h3>API 文档</h3>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="聊天补全">
|
|
<code>POST /v1/chat/completions</code>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="预设列表">
|
|
<code>GET /app/preset/list</code>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="提供商列表">
|
|
<code>GET /app/provider/list</code>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-divider />
|
|
|
|
<h3>使用示例</h3>
|
|
<el-code-block>
|
|
<pre>
|
|
curl -X POST http://localhost:8080/v1/chat/completions \
|
|
-H "Authorization: Bearer YOUR_API_KEY" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{
|
|
"messages": [{"role": "user", "content": "你好"}],
|
|
"presetId": 1
|
|
}'
|
|
</pre>
|
|
</el-code-block>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
|
const apiKey = ref('ak-xxxxxxxxxxxxxxxx')
|
|
|
|
const regenerateKey = async () => {
|
|
try {
|
|
await ElMessageBox.confirm('确定要重新生成 API 密钥吗？旧密钥将失效', '提示', {
|
|
type: 'warning'
|
|
})
|
|
// TODO: 调用 API 重新生成密钥
|
|
ElMessage.success('密钥已重新生成')
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
ElMessage.error('操作失败')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.api-container pre {
|
|
background-color: #f5f7fa;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|