🎉 初始化项目

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>

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="user-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>用户管理</span>
+          <el-button type="primary" @click="handleCreate">
+            <el-icon><Plus /></el-icon>
+            新建用户
+          </el-button>
+        </div>
+      </template>
+
+      <el-table :data="userList" v-loading="loading">
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="role" label="角色" width="120">
+          <template #default="{ row }">
+            <el-tag :type="row.role === 'admin' ? 'danger' : 'info'">
+              {{ row.role === 'admin' ? '管理员' : '普通用户' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
+              {{ row.status === 'active' ? '正常' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" width="180" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
+            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getUserList } from '@/api/user'
+
+const loading = ref(false)
+const userList = ref([])
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getUserList()
+    userList.value = res.list || []
+  } catch (error) {
+    ElMessage.error('获取用户列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCreate = () => {
+  ElMessage.info('新建用户功能开发中')
+}
+
+const handleEdit = (row) => {
+  ElMessage.info('编辑用户功能开发中')
+}
+
+const handleDelete = (row) => {
+  ElMessage.info('删除用户功能开发中')
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>