AIGC/demo/frontend/src/views/ApiManagement.vue

<template>
  <div class="api-management">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <div class="logo">
        <div class="logo-icon"></div>
        <span>LOGO</span>
      </div>
      <nav class="nav-menu">
        <div class="nav-item" @click="goToDashboard">
          <el-icon><Grid /></el-icon>
          <span>数据仪表台</span>
        </div>
        <div class="nav-item" @click="goToMembers">
          <el-icon><User /></el-icon>
          <span>会员管理</span>
        </div>
        <div class="nav-item" @click="goToOrders">
          <el-icon><ShoppingCart /></el-icon>
          <span>订单管理</span>
        </div>
        <div class="nav-item active">
          <el-icon><Document /></el-icon>
          <span>API管理</span>
        </div>
        <div class="nav-item" @click="goToTasks">
          <el-icon><Document /></el-icon>
          <span>生成任务记录</span>
        </div>
        <div class="nav-item" @click="goToSettings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </div>
      </nav>
      <div class="sidebar-footer">
        <div class="online-users">
          当前在线用户: <span class="highlight">87/500</span>
        </div>
        <div class="system-uptime">
          系统运行时间: <span class="highlight">48小时32分</span>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 顶部搜索栏 -->
      <header class="top-header">
        <div class="search-bar">
          <el-icon class="search-icon"><Search /></el-icon>
          <input type="text" placeholder="搜索你想要的内容" class="search-input" />
        </div>
        <div class="header-actions">
          <div class="notification-icon-wrapper">
            <el-icon class="notification-icon"><Bell /></el-icon>
            <span class="notification-badge"></span>
          </div>
          <div class="user-avatar">
            <img src="/images/backgrounds/welcome.jpg" alt="用户头像" />
            <el-icon class="arrow-down"><ArrowDown /></el-icon>
          </div>
        </div>
      </header>

      <!-- API密钥输入内容 -->
      <section class="api-content">
        <div class="content-header">
          <h2>API管理</h2>
        </div>

        <div class="api-form-container">
          <el-form :model="apiForm" label-width="120px" class="api-form">
            <el-form-item label="API密钥">
              <el-input
                v-model="apiForm.apiKey"
                type="password"
                placeholder="请输入API密钥"
                show-password
                style="width: 100%; max-width: 600px;"
              />
            </el-form-item>
            <el-form-item label="Token过期时间">
              <div style="display: flex; align-items: center; gap: 12px; width: 100%; max-width: 600px;">
                <el-input
                  v-model.number="apiForm.jwtExpirationHours"
                  type="number"
                  placeholder="请输入小时数（1-720）"
                  style="flex: 1;"
                  :min="1"
                  :max="720"
                />
                <span style="color: #6b7280; font-size: 14px;">小时</span>
                <span style="color: #9ca3af; font-size: 12px;" v-if="apiForm.jwtExpirationHours">
                  ({{ formatJwtExpiration(apiForm.jwtExpirationHours) }})
                </span>
              </div>
              <div style="margin-top: 8px; color: #6b7280; font-size: 12px;">
                范围：1-720小时（1小时-30天）
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveApiKey" :loading="saving">保存</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid,
  User,
  ShoppingCart,
  Document,
  Setting,
  Search,
  Bell,
  ArrowDown
} from '@element-plus/icons-vue'
import api from '@/api/request'

const router = useRouter()

const saving = ref(false)
const loading = ref(false)
const apiForm = reactive({
  apiKey: '',
  jwtExpirationHours: 24  // 默认24小时
})

// 导航功能
const goToDashboard = () => {
  router.push('/admin/dashboard')
}

const goToMembers = () => {
  router.push('/member-management')
}

const goToOrders = () => {
  router.push('/admin/orders')
}

const goToTasks = () => {
  router.push('/generate-task-record')
}

const goToSettings = () => {
  router.push('/system-settings')
}

// 格式化JWT过期时间显示
const formatJwtExpiration = (hours) => {
  if (!hours) return ''
  if (hours < 24) {
    return `${hours}小时`
  } else if (hours < 720) {
    const days = Math.floor(hours / 24)
    const remainingHours = hours % 24
    if (remainingHours === 0) {
      return `${days}天`
    }
    return `${days}天${remainingHours}小时`
  } else {
    return '30天'
  }
}

// 加载当前API密钥和JWT配置（仅显示部分）
const loadApiKey = async () => {
  loading.value = true
  try {
    const response = await api.get('/api-key')
    if (response.data?.maskedKey) {
      // 不显示掩码后的密钥，只用于验证
      console.log('当前API密钥已配置')
    }
    // 加载JWT过期时间（转换为小时）
    if (response.data?.jwtExpiration) {
      apiForm.jwtExpirationHours = Math.round(response.data.jwtExpiration / 3600000)
    } else if (response.data?.jwtExpirationHours) {
      apiForm.jwtExpirationHours = Math.round(response.data.jwtExpirationHours)
    }
  } catch (error) {
    console.error('加载配置失败:', error)
  } finally {
    loading.value = false
  }
}

// 保存API密钥和JWT配置
const saveApiKey = async () => {
  // 检查是否有任何输入
  const hasApiKey = apiForm.apiKey && apiForm.apiKey.trim() !== ''
  const hasJwtExpiration = apiForm.jwtExpirationHours != null && apiForm.jwtExpirationHours > 0
  
  // 验证输入：至少需要提供一个配置项
  if (!hasApiKey && !hasJwtExpiration) {
    ElMessage.warning('请至少输入API密钥或设置Token过期时间')
    return
  }
  
  // 验证JWT过期时间范围
  if (hasJwtExpiration && (apiForm.jwtExpirationHours < 1 || apiForm.jwtExpirationHours > 720)) {
    ElMessage.warning('Token过期时间必须在1-720小时之间（1小时-30天）')
    return
  }
  
  saving.value = true
  try {
    const requestData = {}
    
    // 如果提供了API密钥，添加到请求中
    if (hasApiKey) {
      requestData.apiKey = apiForm.apiKey.trim()
    }
    
    // 如果提供了JWT过期时间，转换为毫秒并添加到请求中
    if (hasJwtExpiration) {
      requestData.jwtExpiration = apiForm.jwtExpirationHours * 3600000  // 转换为毫秒
    }
    
    const response = await api.put('/api-key', requestData)
    
    if (response.data?.success) {
      ElMessage.success(response.data.message || '配置保存成功，请重启应用以使配置生效')
      // 清空API密钥输入框（保留JWT过期时间）
      apiForm.apiKey = ''
    } else {
      ElMessage.error(response.data?.error || '保存失败')
    }
  } catch (error) {
    console.error('保存配置失败:', error)
    ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message || '未知错误'))
  } finally {
    saving.value = false
  }
}

// 重置表单
const resetForm = () => {
  apiForm.apiKey = ''
  // 重新加载JWT过期时间
  loadApiKey()
}

// 页面加载时获取当前API密钥状态
onMounted(() => {
  loadApiKey()
})
</script>

<style scoped>
.api-management {
  display: flex;
  min-height: 100vh;
  background: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 左侧导航栏 */
.sidebar {
  width: 240px;
  background: white;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 32px;
}

.logo-icon {
  width: 24px;
  height: 24px;
  background: #3b82f6;
  border-radius: 4px;
  margin-right: 12px;
}

.logo span {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.nav-menu {
  flex: 1;
  padding: 0 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.nav-item:hover {
  background: #f3f4f6;
  color: #374151;
}

.nav-item.active {
  background: #dbeafe;
  color: #3b82f6;
}

.nav-item .el-icon {
  margin-right: 12px;
  font-size: 18px;
}

.nav-item span {
  font-size: 14px;
  font-weight: 500;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  margin-top: auto;
}

.online-users,
.system-uptime {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
  line-height: 1.5;
}

.highlight {
  color: #3b82f6;
  font-weight: 600;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

/* 顶部搜索栏 */
.top-header {
  background: white;
  border-bottom: 1px solid #e9ecef;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
  z-index: 1;
}

.search-input {
  width: 300px;
  padding: 10px 12px 10px 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input::placeholder {
  color: #9ca3af;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.notification-icon-wrapper {
  position: relative;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.notification-icon-wrapper:hover {
  background: #f3f4f6;
}

.notification-icon {
  font-size: 20px;
  color: #6b7280;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.user-avatar:hover {
  background: #f3f4f6;
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar .arrow-down {
  font-size: 12px;
  color: #6b7280;
}

/* API内容区域 */
.api-content {
  padding: 24px;
  flex: 1;
  background: white;
  margin: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.content-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.api-form-container {
  max-width: 800px;
}

.api-form {
  background: #f9fafb;
  padding: 32px;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .api-management {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
  }
  
  .nav-menu {
    display: flex;
    overflow-x: auto;
    padding: 0 16px;
  }
  
  .nav-item {
    white-space: nowrap;
    margin-right: 16px;
    margin-bottom: 0;
  }
  
  .sidebar-footer {
    display: none;
  }
  
  .search-input {
    width: 200px;
  }
  
  .api-content {
    padding: 16px;
  }
}
</style>