feat: 完整实现AD域控用户认证系统

主要功能:
- 新增LDAP服务连接AD域控服务器
- 实现多格式AD用户认证(sAMAccountName, UPN, 域\用户名, DN)
- 支持中文显示名和拼音用户名搜索
- 添加用户账户状态检查(禁用账户检测)
- 实现JWT token认证和用户会话管理

新增文件:
- src/services/ldapService.js - LDAP核心服务
- src/routes/ldapRoutes.js - AD认证API路由
- src/services/userMappingService.js - 用户映射服务
- web/admin-spa/src/views/UserDashboardView.vue - 用户控制台
- web/admin-spa/src/components/user/ - 用户组件目录

修改功能:
- ApiStatsView.vue 增加用户登录按钮和模态框
- 路由系统增加用户专用页面
- 安装ldapjs和jsonwebtoken依赖

技术特性:
- 多种认证格式自动尝试
- LDAP referral错误处理
- 详细认证日志和错误码记录
- 前后端完整用户认证流程

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/admin-spa/src/components/user/UserApiKeysView.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="space-y-6">
+    <!-- API Key 创建区域 -->
+    <div class="glass-strong rounded-3xl p-6 shadow-xl">
+      <div class="mb-6 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <i class="fas fa-key text-2xl text-blue-500" />
+          <div>
+            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100">API Keys 管理</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">每个用户只能创建一个 API Key</p>
+          </div>
+        </div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">{{ apiKeys.length }}/1 个 Key</div>
+      </div>
+
+      <!-- 创建新 API Key -->
+      <div v-if="apiKeys.length === 0" class="space-y-4">
+        <div
+          class="rounded-xl border-2 border-dashed border-gray-300 bg-gray-50/50 p-6 text-center dark:border-gray-600 dark:bg-gray-800/50"
+        >
+          <i class="fas fa-plus-circle mb-3 text-3xl text-gray-400" />
+          <h4 class="mb-2 text-lg font-medium text-gray-700 dark:text-gray-300">
+            创建您的第一个 API Key
+          </h4>
+          <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">
+            API Key 将用于访问 Claude Relay Service
+          </p>
+          <form class="mx-auto max-w-md space-y-3" @submit.prevent="createApiKey">
+            <input
+              v-model="newKeyForm.name"
+              class="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-800 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-400"
+              placeholder="API Key 名称（可选）"
+              type="text"
+            />
+            <input
+              v-model.number="newKeyForm.limit"
+              class="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-800 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-400"
+              max="1000000"
+              min="1000"
+              placeholder="使用额度（默认 100,000）"
+              type="number"
+            />
+            <button
+              class="w-full rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-3 font-medium text-white transition-all hover:from-blue-600 hover:to-purple-700 disabled:opacity-50"
+              :disabled="createLoading"
+              type="submit"
+            >
+              <div v-if="createLoading" class="flex items-center justify-center gap-2">
+                <div
+                  class="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
+                ></div>
+                创建中...
+              </div>
+              <div v-else class="flex items-center justify-center gap-2">
+                <i class="fas fa-plus" />
+                创建 API Key
+              </div>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- 现有 API Keys 显示 -->
+    <div v-if="apiKeys.length > 0" class="space-y-4">
+      <div
+        v-for="apiKey in apiKeys"
+        :key="apiKey.id"
+        class="glass-strong rounded-3xl p-6 shadow-xl"
+      >
+        <div class="mb-4 flex items-start justify-between">
+          <div class="flex items-start gap-4">
+            <div
+              class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20"
+            >
+              <i class="fas fa-key text-lg text-blue-600 dark:text-blue-400" />
+            </div>
+            <div>
+              <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100">
+                {{ apiKey.name || '未命名 API Key' }}
+              </h4>
+              <p class="text-sm text-gray-600 dark:text-gray-400">
+                创建时间：{{ formatDate(apiKey.createdAt) }}
+              </p>
+              <div class="mt-2 flex items-center gap-2">
+                <span
+                  class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium"
+                  :class="
+                    apiKey.status === 'active'
+                      ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                      : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                  "
+                >
+                  <i
+                    :class="
+                      apiKey.status === 'active' ? 'fas fa-check-circle' : 'fas fa-times-circle'
+                    "
+                  />
+                  {{ apiKey.status === 'active' ? '活跃' : '已禁用' }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- API Key 显示 -->
+        <div class="mb-4 space-y-3">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            API Key
+          </label>
+          <div class="flex gap-2">
+            <input
+              class="flex-1 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
+              readonly
+              type="text"
+              :value="showApiKey[apiKey.id] ? apiKey.key : maskApiKey(apiKey.key)"
+            />
+            <button
+              class="rounded-xl border border-gray-300 px-4 py-3 text-gray-600 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700"
+              @click="toggleApiKeyVisibility(apiKey.id)"
+            >
+              <i :class="showApiKey[apiKey.id] ? 'fas fa-eye-slash' : 'fas fa-eye'" />
+            </button>
+            <button
+              class="rounded-xl border border-gray-300 px-4 py-3 text-gray-600 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700"
+              @click="copyApiKey(apiKey.key)"
+            >
+              <i class="fas fa-copy" />
+            </button>
+          </div>
+        </div>
+
+        <!-- 使用统计 -->
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <div class="rounded-xl bg-blue-50 p-4 dark:bg-blue-900/20">
+            <div class="flex items-center gap-3">
+              <i class="fas fa-chart-bar text-blue-500" />
+              <div>
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-300">已使用</p>
+                <p class="text-xl font-bold text-blue-900 dark:text-blue-100">
+                  {{ apiKey.used?.toLocaleString() || 0 }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="rounded-xl bg-green-50 p-4 dark:bg-green-900/20">
+            <div class="flex items-center gap-3">
+              <i class="fas fa-battery-three-quarters text-green-500" />
+              <div>
+                <p class="text-sm font-medium text-green-800 dark:text-green-300">总额度</p>
+                <p class="text-xl font-bold text-green-900 dark:text-green-100">
+                  {{ apiKey.limit?.toLocaleString() || 0 }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="rounded-xl bg-purple-50 p-4 dark:bg-purple-900/20">
+            <div class="flex items-center gap-3">
+              <i class="fas fa-percentage text-purple-500" />
+              <div>
+                <p class="text-sm font-medium text-purple-800 dark:text-purple-300">使用率</p>
+                <p class="text-xl font-bold text-purple-900 dark:text-purple-100">
+                  {{ calculateUsagePercentage(apiKey.used, apiKey.limit) }}%
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 使用进度条 -->
+        <div class="mt-4">
+          <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+            <span>使用进度</span>
+            <span>{{ calculateUsagePercentage(apiKey.used, apiKey.limit) }}%</span>
+          </div>
+          <div class="mt-2 h-3 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+            <div
+              class="h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 transition-all duration-500"
+              :style="{
+                width: `${Math.min(calculateUsagePercentage(apiKey.used, apiKey.limit), 100)}%`
+              }"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="flex items-center justify-center py-8">
+      <div class="flex items-center gap-3">
+        <div
+          class="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"
+        ></div>
+        <span class="text-gray-600 dark:text-gray-400">加载中...</span>
+      </div>
+    </div>
+
+    <!-- 错误提示 -->
+    <div
+      v-if="error"
+      class="rounded-xl border border-red-500/30 bg-red-500/20 p-4 text-center text-red-800 dark:text-red-400"
+    >
+      <i class="fas fa-exclamation-triangle mr-2" />{{ error }}
+    </div>
+
+    <!-- 成功提示 -->
+    <div
+      v-if="successMessage"
+      class="rounded-xl border border-green-500/30 bg-green-500/20 p-4 text-center text-green-800 dark:text-green-400"
+    >
+      <i class="fas fa-check-circle mr-2" />{{ successMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+
+defineProps({
+  userInfo: {
+    type: Object,
+    required: true
+  }
+})
+
+// 响应式数据
+const loading = ref(false)
+const createLoading = ref(false)
+const error = ref('')
+const successMessage = ref('')
+const apiKeys = ref([])
+const showApiKey = reactive({})
+
+const newKeyForm = ref({
+  name: '',
+  limit: 100000
+})
+
+// 获取用户的 API Keys
+const fetchApiKeys = async () => {
+  loading.value = true
+  error.value = ''
+
+  try {
+    const token = localStorage.getItem('user_token')
+    const response = await fetch('/admin/ldap/user/api-keys', {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    })
+
+    const result = await response.json()
+    if (result.success) {
+      apiKeys.value = result.apiKeys
+    } else {
+      error.value = result.message || '获取 API Keys 失败'
+    }
+  } catch (err) {
+    console.error('获取 API Keys 错误:', err)
+    error.value = '网络错误，请重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 创建新的 API Key
+const createApiKey = async () => {
+  createLoading.value = true
+  error.value = ''
+  successMessage.value = ''
+
+  try {
+    const token = localStorage.getItem('user_token')
+    const response = await fetch('/admin/ldap/user/api-keys', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        name: newKeyForm.value.name || 'AD用户密钥',
+        limit: newKeyForm.value.limit || 100000
+      })
+    })
+
+    const result = await response.json()
+    if (result.success) {
+      successMessage.value = 'API Key 创建成功'
+      apiKeys.value = [result.apiKey]
+      newKeyForm.value = { name: '', limit: 100000 }
+
+      // 3秒后清除成功消息
+      setTimeout(() => {
+        successMessage.value = ''
+      }, 3000)
+    } else {
+      error.value = result.message || 'API Key 创建失败'
+    }
+  } catch (err) {
+    console.error('创建 API Key 错误:', err)
+    error.value = '网络错误，请重试'
+  } finally {
+    createLoading.value = false
+  }
+}
+
+// 切换 API Key 显示/隐藏
+const toggleApiKeyVisibility = (keyId) => {
+  showApiKey[keyId] = !showApiKey[keyId]
+}
+
+// 复制 API Key
+const copyApiKey = async (apiKey) => {
+  try {
+    await navigator.clipboard.writeText(apiKey)
+    successMessage.value = 'API Key 已复制到剪贴板'
+    setTimeout(() => {
+      successMessage.value = ''
+    }, 2000)
+  } catch (err) {
+    console.error('复制失败:', err)
+    error.value = '复制失败，请手动选择复制'
+  }
+}
+
+// 遮盖 API Key
+const maskApiKey = (key) => {
+  if (!key) return ''
+  const start = key.substring(0, 8)
+  const end = key.substring(key.length - 8)
+  return `${start}${'*'.repeat(20)}${end}`
+}
+
+// 计算使用百分比
+const calculateUsagePercentage = (used, limit) => {
+  if (!limit || limit === 0) return 0
+  return Math.round((used / limit) * 100)
+}
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 初始化
+onMounted(() => {
+  fetchApiKeys()
+})
+</script>
+
+<style scoped>
+/* 使用全局样式 */
+</style>

web/admin-spa/src/components/user/UserStatsView.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="space-y-6">
+    <!-- 统计概览卡片 -->
+    <div class="glass-strong rounded-3xl p-6 shadow-xl">
+      <div class="mb-6 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <i class="fas fa-chart-line text-2xl text-blue-500" />
+          <div>
+            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100">使用统计</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">您的 API 使用情况概览</p>
+          </div>
+        </div>
+        <button
+          class="rounded-xl bg-blue-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600"
+          :disabled="loading"
+          @click="refreshStats"
+        >
+          <i class="fas fa-sync-alt mr-1" :class="{ 'animate-spin': loading }" />
+          刷新
+        </button>
+      </div>
+
+      <!-- 统计卡片网格 -->
+      <div v-if="stats" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <!-- API Key 数量 -->
+        <div
+          class="rounded-xl bg-gradient-to-br from-blue-500/10 to-blue-600/10 p-4 dark:from-blue-500/5 dark:to-blue-600/5"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-blue-800 dark:text-blue-300">API Keys</p>
+              <p class="text-2xl font-bold text-blue-900 dark:text-blue-100">
+                {{ stats.keyCount }}
+              </p>
+            </div>
+            <div class="rounded-full bg-blue-500/20 p-2">
+              <i class="fas fa-key text-blue-600 dark:text-blue-400" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 总使用量 -->
+        <div
+          class="rounded-xl bg-gradient-to-br from-green-500/10 to-green-600/10 p-4 dark:from-green-500/5 dark:to-green-600/5"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-green-800 dark:text-green-300">总使用量</p>
+              <p class="text-2xl font-bold text-green-900 dark:text-green-100">
+                {{ stats.totalUsage.toLocaleString() }}
+              </p>
+            </div>
+            <div class="rounded-full bg-green-500/20 p-2">
+              <i class="fas fa-chart-bar text-green-600 dark:text-green-400" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 总额度 -->
+        <div
+          class="rounded-xl bg-gradient-to-br from-purple-500/10 to-purple-600/10 p-4 dark:from-purple-500/5 dark:to-purple-600/5"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-purple-800 dark:text-purple-300">总额度</p>
+              <p class="text-2xl font-bold text-purple-900 dark:text-purple-100">
+                {{ stats.totalLimit.toLocaleString() }}
+              </p>
+            </div>
+            <div class="rounded-full bg-purple-500/20 p-2">
+              <i class="fas fa-battery-three-quarters text-purple-600 dark:text-purple-400" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 使用率 -->
+        <div
+          class="rounded-xl bg-gradient-to-br from-orange-500/10 to-orange-600/10 p-4 dark:from-orange-500/5 dark:to-orange-600/5"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-orange-800 dark:text-orange-300">使用率</p>
+              <p class="text-2xl font-bold text-orange-900 dark:text-orange-100">
+                {{ stats.percentage }}%
+              </p>
+            </div>
+            <div class="rounded-full bg-orange-500/20 p-2">
+              <i class="fas fa-percentage text-orange-600 dark:text-orange-400" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="loading && !stats" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="animate-pulse rounded-xl bg-gray-200/50 p-4 dark:bg-gray-700/50"
+        >
+          <div class="space-y-3">
+            <div class="h-4 w-20 rounded bg-gray-300/70 dark:bg-gray-600/70"></div>
+            <div class="h-8 w-16 rounded bg-gray-300/70 dark:bg-gray-600/70"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 各个 API Key 详细统计 -->
+    <div v-if="stats && stats.keys.length > 0" class="space-y-4">
+      <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100">API Key 详细统计</h4>
+
+      <div
+        v-for="keyStats in stats.keys"
+        :key="keyStats.id"
+        class="glass-strong rounded-2xl p-5 shadow-lg"
+      >
+        <div class="mb-4 flex items-start justify-between">
+          <div class="flex items-start gap-3">
+            <div
+              class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20"
+            >
+              <i class="fas fa-key text-blue-600 dark:text-blue-400" />
+            </div>
+            <div>
+              <h5 class="font-semibold text-gray-800 dark:text-gray-100">
+                {{ keyStats.name || '未命名 API Key' }}
+              </h5>
+              <p class="text-sm text-gray-600 dark:text-gray-400">ID: {{ keyStats.id }}</p>
+            </div>
+          </div>
+          <div class="text-right">
+            <p class="text-sm text-gray-600 dark:text-gray-400">使用率</p>
+            <p class="text-lg font-bold text-gray-800 dark:text-gray-100">
+              {{ keyStats.percentage }}%
+            </p>
+          </div>
+        </div>
+
+        <!-- 使用统计条 -->
+        <div class="mb-3 grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <span class="text-gray-600 dark:text-gray-400">已使用：</span>
+            <span class="font-semibold text-gray-800 dark:text-gray-100">{{
+              keyStats.used.toLocaleString()
+            }}</span>
+          </div>
+          <div>
+            <span class="text-gray-600 dark:text-gray-400">总额度：</span>
+            <span class="font-semibold text-gray-800 dark:text-gray-100">{{
+              keyStats.limit.toLocaleString()
+            }}</span>
+          </div>
+        </div>
+
+        <!-- 进度条 -->
+        <div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            class="h-full rounded-full bg-gradient-to-r transition-all duration-500"
+            :class="getProgressColor(keyStats.percentage)"
+            :style="{ width: `${Math.min(keyStats.percentage, 100)}%` }"
+          ></div>
+        </div>
+
+        <!-- 状态警告 -->
+        <div
+          v-if="keyStats.percentage >= 90"
+          class="mt-3 flex items-center gap-2 text-sm text-red-600 dark:text-red-400"
+        >
+          <i class="fas fa-exclamation-triangle" />
+          <span>额度即将用尽，请注意使用</span>
+        </div>
+        <div
+          v-else-if="keyStats.percentage >= 75"
+          class="mt-3 flex items-center gap-2 text-sm text-orange-600 dark:text-orange-400"
+        >
+          <i class="fas fa-info-circle" />
+          <span>额度使用较多，建议关注使用情况</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 无数据提示 -->
+    <div
+      v-if="!loading && stats && stats.keys.length === 0"
+      class="glass-strong rounded-2xl p-8 text-center shadow-lg"
+    >
+      <i class="fas fa-chart-line mb-3 text-4xl text-gray-400" />
+      <h4 class="mb-2 text-lg font-medium text-gray-700 dark:text-gray-300">暂无使用数据</h4>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        创建 API Key 后开始使用即可查看详细统计
+      </p>
+    </div>
+
+    <!-- 错误提示 -->
+    <div
+      v-if="error"
+      class="rounded-xl border border-red-500/30 bg-red-500/20 p-4 text-center text-red-800 dark:text-red-400"
+    >
+      <i class="fas fa-exclamation-triangle mr-2" />{{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+defineProps({
+  userInfo: {
+    type: Object,
+    required: true
+  }
+})
+
+// 响应式数据
+const loading = ref(false)
+const error = ref('')
+const stats = ref(null)
+
+// 获取用户统计数据
+const fetchStats = async () => {
+  loading.value = true
+  error.value = ''
+
+  try {
+    const token = localStorage.getItem('user_token')
+    const response = await fetch('/admin/ldap/user/usage-stats', {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    })
+
+    const result = await response.json()
+    if (result.success) {
+      stats.value = result.stats
+    } else {
+      error.value = result.message || '获取统计数据失败'
+    }
+  } catch (err) {
+    console.error('获取统计数据错误:', err)
+    error.value = '网络错误，请重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 刷新统计数据
+const refreshStats = () => {
+  fetchStats()
+}
+
+// 获取进度条颜色
+const getProgressColor = (percentage) => {
+  if (percentage >= 90) return 'from-red-500 to-red-600'
+  if (percentage >= 75) return 'from-orange-500 to-orange-600'
+  if (percentage >= 50) return 'from-yellow-500 to-yellow-600'
+  return 'from-green-500 to-green-600'
+}
+
+// 初始化
+onMounted(() => {
+  fetchStats()
+})
+</script>
+
+<style scoped>
+/* 使用全局样式 */
+</style>

web/admin-spa/src/router/index.js

@@ -11,6 +11,7 @@ const AccountsView = () => import('@/views/AccountsView.vue')
 const TutorialView = () => import('@/views/TutorialView.vue')
 const SettingsView = () => import('@/views/SettingsView.vue')
 const ApiStatsView = () => import('@/views/ApiStatsView.vue')
+const UserDashboardView = () => import('@/views/UserDashboardView.vue')
 
 const routes = [
   {
@@ -41,6 +42,12 @@ const routes = [
     component: ApiStatsView,
     meta: { requiresAuth: false }
   },
+  {
+    path: '/user-dashboard',
+    name: 'UserDashboard',
+    component: UserDashboardView,
+    meta: { requiresAuth: false, userAuth: true }
+  },
   {
     path: '/dashboard',
     component: MainLayout,
@@ -133,7 +140,18 @@ router.beforeEach((to, from, next) => {
   // API Stats 页面不需要认证，直接放行
   if (to.path === '/api-stats' || to.path.startsWith('/api-stats')) {
     next()
-  } else if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+  }
+  // 用户仪表盘需要用户token验证
+  else if (to.meta.userAuth) {
+    const userToken = localStorage.getItem('user_token')
+    if (!userToken) {
+      next('/api-stats')
+    } else {
+      next()
+    }
+  }
+  // 管理员页面需要管理员认证
+  else if (to.meta.requiresAuth && !authStore.isAuthenticated) {
     next('/login')
   } else if (to.path === '/login' && authStore.isAuthenticated) {
     next('/dashboard')

web/admin-spa/src/views/ApiStatsView.vue

@@ -20,6 +20,15 @@
             class="h-8 w-px bg-gradient-to-b from-transparent via-gray-300 to-transparent opacity-50 dark:via-gray-600"
           />
 
+          <!-- 用户登录按钮 -->
+          <button
+            class="user-login-button flex items-center gap-2 rounded-2xl px-4 py-2 transition-all duration-300 md:px-5 md:py-2.5"
+            @click="showUserLogin"
+          >
+            <i class="fas fa-user-circle text-sm md:text-base" />
+            <span class="text-xs font-semibold tracking-wide md:text-sm">用户登录</span>
+          </button>
+
           <!-- 管理后台按钮 -->
           <router-link
             class="admin-button-refined flex items-center gap-2 rounded-2xl px-4 py-2 transition-all duration-300 md:px-5 md:py-2.5"
@@ -129,6 +138,74 @@
         <TutorialView />
       </div>
     </div>
+
+    <!-- 用户登录模态框 -->
+    <div v-if="showLoginModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" @click="hideUserLogin"></div>
+      <div class="glass-strong relative w-full max-w-md rounded-2xl p-6 shadow-2xl">
+        <div class="mb-6 text-center">
+          <h2 class="mb-2 text-2xl font-bold text-gray-800 dark:text-gray-100">AD域控登录</h2>
+          <p class="text-sm text-gray-600 dark:text-gray-400">使用您的域账号登录</p>
+        </div>
+
+        <form class="space-y-4" @submit.prevent="handleUserLogin">
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+              用户名
+            </label>
+            <input
+              v-model="userLoginForm.username"
+              class="w-full rounded-xl border border-gray-300 bg-white/70 px-4 py-3 text-gray-800 placeholder-gray-500 backdrop-blur-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200 dark:placeholder-gray-400"
+              placeholder="请输入域用户名"
+              required
+              type="text"
+            />
+          </div>
+
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100">
+              密码
+            </label>
+            <input
+              v-model="userLoginForm.password"
+              class="w-full rounded-xl border border-gray-300 bg-white/70 px-4 py-3 text-gray-800 placeholder-gray-500 backdrop-blur-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200 dark:placeholder-gray-400"
+              placeholder="请输入域密码"
+              required
+              type="password"
+            />
+          </div>
+
+          <div class="flex gap-3 pt-4">
+            <button
+              class="flex-1 rounded-xl border border-gray-300 bg-white/70 px-4 py-3 text-sm font-medium text-gray-700 backdrop-blur-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-300 dark:hover:bg-gray-700"
+              type="button"
+              @click="hideUserLogin"
+            >
+              取消
+            </button>
+            <button
+              class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 px-4 py-3 text-sm font-medium text-white backdrop-blur-sm transition-all hover:from-blue-600 hover:to-purple-700 disabled:opacity-50"
+              :disabled="userLoginLoading"
+              type="submit"
+            >
+              <div
+                v-if="userLoginLoading"
+                class="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
+              ></div>
+              <i v-else class="fas fa-sign-in-alt"></i>
+              {{ userLoginLoading ? '登录中...' : '登录' }}
+            </button>
+          </div>
+        </form>
+
+        <div
+          v-if="userLoginError"
+          class="mt-4 rounded-xl border border-red-500/30 bg-red-500/20 p-3 text-center text-sm text-red-800 dark:text-red-400"
+        >
+          <i class="fas fa-exclamation-triangle mr-2"></i>{{ userLoginError }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -157,6 +234,15 @@ const currentTab = ref('stats')
 // 主题相关
 const isDarkMode = computed(() => themeStore.isDarkMode)
 
+// 用户登录相关
+const showLoginModal = ref(false)
+const userLoginLoading = ref(false)
+const userLoginError = ref('')
+const userLoginForm = ref({
+  username: '',
+  password: ''
+})
+
 const {
   apiKey,
   apiId,
@@ -171,6 +257,63 @@ const {
 
 const { queryStats, switchPeriod, loadStatsWithApiId, loadOemSettings, reset } = apiStatsStore
 
+// 用户登录相关方法
+const showUserLogin = () => {
+  showLoginModal.value = true
+  userLoginError.value = ''
+  userLoginForm.value = {
+    username: '',
+    password: ''
+  }
+}
+
+const hideUserLogin = () => {
+  showLoginModal.value = false
+  userLoginError.value = ''
+  userLoginForm.value = {
+    username: '',
+    password: ''
+  }
+}
+
+const handleUserLogin = async () => {
+  if (!userLoginForm.value.username || !userLoginForm.value.password) {
+    userLoginError.value = '请输入用户名和密码'
+    return
+  }
+
+  userLoginLoading.value = true
+  userLoginError.value = ''
+
+  try {
+    const response = await fetch('/admin/ldap/login', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(userLoginForm.value)
+    })
+
+    const result = await response.json()
+
+    if (result.success) {
+      // 保存token到localStorage
+      localStorage.setItem('user_token', result.token)
+      localStorage.setItem('user_info', JSON.stringify(result.user))
+
+      // 跳转到用户专用页面
+      window.location.href = '/admin-next/user-dashboard'
+    } else {
+      userLoginError.value = result.message || '登录失败'
+    }
+  } catch (error) {
+    console.error('用户登录错误:', error)
+    userLoginError.value = '网络错误，请重试'
+  } finally {
+    userLoginLoading.value = false
+  }
+}
+
 // 处理键盘快捷键
 const handleKeyDown = (event) => {
   // Ctrl/Cmd + Enter 查询
@@ -309,6 +452,55 @@ watch(apiKey, (newValue) => {
   letter-spacing: -0.025em;
 }
 
+/* 用户登录按钮 */
+.user-login-button {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  text-decoration: none;
+  box-shadow:
+    0 4px 12px rgba(16, 185, 129, 0.25),
+    inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* 暗色模式下的用户登录按钮 */
+:global(.dark) .user-login-button {
+  background: rgba(34, 197, 94, 0.8);
+  border: 1px solid rgba(107, 114, 128, 0.4);
+  color: #f3f4f6;
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.3),
+    inset 0 1px 1px rgba(255, 255, 255, 0.05);
+}
+
+.user-login-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
+  box-shadow:
+    0 8px 20px rgba(5, 150, 105, 0.35),
+    inset 0 1px 1px rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  color: white;
+}
+
+:global(.dark) .user-login-button:hover {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border-color: rgba(34, 197, 94, 0.4);
+  box-shadow:
+    0 8px 20px rgba(16, 185, 129, 0.3),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.user-login-button:active {
+  transform: translateY(-1px) scale(1);
+}
+
 /* 管理后台按钮 - 精致版本 */
 .admin-button-refined {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

web/admin-spa/src/views/UserDashboardView.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="min-h-screen p-4 md:p-6" :class="isDarkMode ? 'gradient-bg-dark' : 'gradient-bg'">
+    <!-- 顶部导航 -->
+    <div class="glass-strong mb-6 rounded-3xl p-4 shadow-xl md:mb-8 md:p-6">
+      <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
+        <div class="flex items-center gap-4">
+          <LogoTitle
+            :loading="false"
+            logo-src="/assets/logo.png"
+            :subtitle="`欢迎，${userInfo.displayName || userInfo.username}`"
+            title="Claude Relay Service"
+          />
+          <div class="text-sm text-gray-600 dark:text-gray-400">
+            <i class="fas fa-building mr-1"></i
+            >{{
+              userInfo.groups && userInfo.groups.length > 0
+                ? extractGroupName(userInfo.groups[0])
+                : '未知部门'
+            }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 md:gap-4">
+          <!-- 主题切换按钮 -->
+          <ThemeToggle mode="dropdown" />
+
+          <!-- 分隔线 -->
+          <div
+            class="h-8 w-px bg-gradient-to-b from-transparent via-gray-300 to-transparent opacity-50 dark:via-gray-600"
+          />
+
+          <!-- 退出登录按钮 -->
+          <button
+            class="logout-button flex items-center gap-2 rounded-2xl px-4 py-2 transition-all duration-300 md:px-5 md:py-2.5"
+            @click="handleLogout"
+          >
+            <i class="fas fa-sign-out-alt text-sm md:text-base" />
+            <span class="text-xs font-semibold tracking-wide md:text-sm">退出登录</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab 切换 -->
+    <div class="mb-6 md:mb-8">
+      <div class="flex justify-center">
+        <div
+          class="inline-flex w-full max-w-2xl rounded-full border border-white/20 bg-white/10 p-1 shadow-lg backdrop-blur-xl md:w-auto"
+        >
+          <button
+            :class="['tab-pill-button', currentTab === 'api-keys' ? 'active' : '']"
+            @click="currentTab = 'api-keys'"
+          >
+            <i class="fas fa-key mr-1 md:mr-2" />
+            <span class="text-sm md:text-base">API Keys</span>
+          </button>
+          <button
+            :class="['tab-pill-button', currentTab === 'dashboard' ? 'active' : '']"
+            @click="currentTab = 'dashboard'"
+          >
+            <i class="fas fa-chart-line mr-1 md:mr-2" />
+            <span class="text-sm md:text-base">使用统计</span>
+          </button>
+          <button
+            :class="['tab-pill-button', currentTab === 'tutorial' ? 'active' : '']"
+            @click="currentTab = 'tutorial'"
+          >
+            <i class="fas fa-graduation-cap mr-1 md:mr-2" />
+            <span class="text-sm md:text-base">使用教程</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- API Keys 管理 -->
+    <div v-if="currentTab === 'api-keys'" class="tab-content">
+      <UserApiKeysView :user-info="userInfo" />
+    </div>
+
+    <!-- 使用统计 -->
+    <div v-if="currentTab === 'dashboard'" class="tab-content">
+      <UserStatsView :user-info="userInfo" />
+    </div>
+
+    <!-- 使用教程 -->
+    <div v-if="currentTab === 'tutorial'" class="tab-content">
+      <div class="glass-strong rounded-3xl shadow-xl">
+        <TutorialView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import LogoTitle from '@/components/common/LogoTitle.vue'
+import ThemeToggle from '@/components/common/ThemeToggle.vue'
+import TutorialView from './TutorialView.vue'
+import UserApiKeysView from '@/components/user/UserApiKeysView.vue'
+import UserStatsView from '@/components/user/UserStatsView.vue'
+const themeStore = useThemeStore()
+
+// 当前标签页
+const currentTab = ref('api-keys')
+
+// 主题相关
+const isDarkMode = computed(() => themeStore.isDarkMode)
+
+// 用户信息
+const userInfo = ref({})
+
+// 从组名中提取部门名称
+const extractGroupName = (group) => {
+  if (!group) return '未知部门'
+  // 从 "CN=总裁办,OU=微店,DC=corp,DC=weidian-inc,DC=com" 中提取 "总裁办"
+  const match = group.match(/CN=([^,]+)/)
+  return match ? match[1] : '未知部门'
+}
+
+// 退出登录
+const handleLogout = () => {
+  localStorage.removeItem('user_token')
+  localStorage.removeItem('user_info')
+  window.location.href = '/admin-next/api-stats'
+}
+
+// 验证用户token
+const verifyToken = async () => {
+  const token = localStorage.getItem('user_token')
+  if (!token) {
+    window.location.href = '/admin-next/api-stats'
+    return false
+  }
+
+  try {
+    const response = await fetch('/admin/ldap/verify-token', {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    })
+
+    const result = await response.json()
+    if (result.success) {
+      userInfo.value = result.user
+      return true
+    } else {
+      localStorage.removeItem('user_token')
+      localStorage.removeItem('user_info')
+      window.location.href = '/admin-next/api-stats'
+      return false
+    }
+  } catch (error) {
+    console.error('Token验证失败:', error)
+    localStorage.removeItem('user_token')
+    localStorage.removeItem('user_info')
+    window.location.href = '/admin-next/api-stats'
+    return false
+  }
+}
+
+// 初始化
+onMounted(async () => {
+  // 初始化主题
+  themeStore.initTheme()
+
+  // 验证token
+  const isValid = await verifyToken()
+  if (!isValid) return
+
+  // 从localStorage获取用户信息作为备份
+  const storedUserInfo = localStorage.getItem('user_info')
+  if (storedUserInfo && !userInfo.value.username) {
+    userInfo.value = JSON.parse(storedUserInfo)
+  }
+})
+</script>
+
+<style scoped>
+/* 渐变背景 */
+.gradient-bg {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background-attachment: fixed;
+  min-height: 100vh;
+  position: relative;
+}
+
+.gradient-bg-dark {
+  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
+  background-attachment: fixed;
+  min-height: 100vh;
+  position: relative;
+}
+
+.gradient-bg::before,
+.gradient-bg-dark::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.gradient-bg::before {
+  background:
+    radial-gradient(circle at 20% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
+}
+
+.gradient-bg-dark::before {
+  background:
+    radial-gradient(circle at 20% 80%, rgba(100, 116, 139, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(71, 85, 105, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(30, 41, 59, 0.1) 0%, transparent 50%);
+}
+
+/* 玻璃态效果 */
+.glass-strong {
+  background: var(--glass-strong-color);
+  backdrop-filter: blur(25px);
+  border: 1px solid var(--border-color);
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  position: relative;
+  z-index: 1;
+}
+
+:global(.dark) .glass-strong {
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.7),
+    0 0 0 1px rgba(55, 65, 81, 0.3),
+    inset 0 1px 0 rgba(75, 85, 99, 0.2);
+}
+
+/* 退出登录按钮 */
+.logout-button {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  text-decoration: none;
+  box-shadow:
+    0 4px 12px rgba(239, 68, 68, 0.25),
+    inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+:global(.dark) .logout-button {
+  background: rgba(239, 68, 68, 0.8);
+  border: 1px solid rgba(107, 114, 128, 0.4);
+  color: #f3f4f6;
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.3),
+    inset 0 1px 1px rgba(255, 255, 255, 0.05);
+}
+
+.logout-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
+  box-shadow:
+    0 8px 20px rgba(220, 38, 38, 0.35),
+    inset 0 1px 1px rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+:global(.dark) .logout-button:hover {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border-color: rgba(239, 68, 68, 0.4);
+  box-shadow:
+    0 8px 20px rgba(239, 68, 68, 0.3),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1);
+}
+
+.logout-button:active {
+  transform: translateY(-1px) scale(1);
+}
+
+/* Tab 胶囊按钮样式 */
+.tab-pill-button {
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.8);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  flex: 1;
+  justify-content: center;
+}
+
+:global(html.dark) .tab-pill-button {
+  color: rgba(209, 213, 219, 0.8);
+}
+
+@media (min-width: 768px) {
+  .tab-pill-button {
+    padding: 0.625rem 1.25rem;
+    flex: none;
+  }
+}
+
+.tab-pill-button:hover {
+  color: white;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+:global(html.dark) .tab-pill-button:hover {
+  color: #f3f4f6;
+  background: rgba(100, 116, 139, 0.2);
+}
+
+.tab-pill-button.active {
+  background: white;
+  color: #764ba2;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+:global(html.dark) .tab-pill-button.active {
+  background: rgba(71, 85, 105, 0.9);
+  color: #f3f4f6;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.3),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
+/* Tab 内容切换动画 */
+.tab-content {
+  animation: tabFadeIn 0.4s ease-out;
+}
+
+@keyframes tabFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>