🎉 初始化项目

web/src/views/system/api/index.vue

@@ -0,0 +1,81 @@
+<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>