558 lines
13 KiB
Vue
558 lines
13 KiB
Vue
<template>
|
||
<div class="api-management">
|
||
<!-- 左侧导航栏 -->
|
||
<aside class="sidebar">
|
||
<div class="logo">
|
||
<img src="/images/backgrounds/logo-admin.svg" alt="Logo" />
|
||
</div>
|
||
<nav class="nav-menu">
|
||
<div class="nav-item" @click="goToDashboard">
|
||
<el-icon><Grid /></el-icon>
|
||
<span>{{ $t('nav.dashboard') }}</span>
|
||
</div>
|
||
<div class="nav-item" @click="goToMembers">
|
||
<el-icon><User /></el-icon>
|
||
<span>{{ $t('nav.members') }}</span>
|
||
</div>
|
||
<div class="nav-item" @click="goToOrders">
|
||
<el-icon><ShoppingCart /></el-icon>
|
||
<span>{{ $t('nav.orders') }}</span>
|
||
</div>
|
||
<div class="nav-item active">
|
||
<el-icon><Document /></el-icon>
|
||
<span>{{ $t('nav.apiManagement') }}</span>
|
||
</div>
|
||
<div class="nav-item" @click="goToTasks">
|
||
<el-icon><Document /></el-icon>
|
||
<span>{{ $t('nav.tasks') }}</span>
|
||
</div>
|
||
<div class="nav-item" @click="goToErrorStats">
|
||
<el-icon><Warning /></el-icon>
|
||
<span>错误统计</span>
|
||
</div>
|
||
<div class="nav-item" @click="goToSettings">
|
||
<el-icon><Setting /></el-icon>
|
||
<span>{{ $t('nav.systemSettings') }}</span>
|
||
</div>
|
||
</nav>
|
||
<div class="sidebar-footer">
|
||
<div class="online-users">
|
||
{{ $t('nav.todayVisitors') }}: <span class="highlight">{{ onlineUsers }}</span>
|
||
</div>
|
||
<div class="system-uptime">
|
||
{{ $t('nav.systemUptime') }}: <span class="highlight">{{ systemUptime }}</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="$t('common.searchPlaceholder')" class="search-input" />
|
||
</div>
|
||
<div class="header-actions">
|
||
<LanguageSwitcher />
|
||
<el-dropdown @command="handleUserCommand">
|
||
<div class="user-avatar">
|
||
<img src="/images/backgrounds/avatar-default.svg" alt="用户头像" />
|
||
<el-icon class="arrow-down"><ArrowDown /></el-icon>
|
||
</div>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item command="exitAdmin">
|
||
{{ $t('admin.exitAdmin') }}
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- API密钥输入内容 -->
|
||
<section class="api-content">
|
||
<div class="content-header">
|
||
<h2>{{ $t('apiManagement.title') }}</h2>
|
||
</div>
|
||
|
||
<div class="api-form-container">
|
||
<el-form :model="apiForm" label-width="120px" class="api-form">
|
||
<el-form-item :label="$t('apiManagement.apiKey')">
|
||
<el-input
|
||
v-model="apiForm.apiKey"
|
||
type="password"
|
||
:placeholder="$t('apiManagement.apiKeyPlaceholder')"
|
||
show-password
|
||
style="width: 100%; max-width: 600px;"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('apiManagement.tokenExpiration')">
|
||
<div style="display: flex; align-items: center; gap: 12px; width: 100%; max-width: 600px;">
|
||
<el-input
|
||
v-model.number="apiForm.jwtExpirationHours"
|
||
type="number"
|
||
:placeholder="$t('apiManagement.tokenPlaceholder')"
|
||
style="flex: 1;"
|
||
:min="1"
|
||
:max="720"
|
||
/>
|
||
<span style="color: #6b7280; font-size: 14px;">{{ $t('apiManagement.hours') }}</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;">
|
||
{{ $t('apiManagement.rangeHint') }}
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="saveApiKey" :loading="saving">{{ $t('common.save') }}</el-button>
|
||
<el-button @click="resetForm">{{ $t('common.reset') }}</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 { useI18n } from 'vue-i18n'
|
||
import {
|
||
Grid,
|
||
User,
|
||
ShoppingCart,
|
||
Document,
|
||
Setting,
|
||
Search,
|
||
ArrowDown,
|
||
Warning
|
||
} from '@element-plus/icons-vue'
|
||
import api from '@/api/request'
|
||
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||
|
||
const router = useRouter()
|
||
const { t } = useI18n()
|
||
|
||
const saving = ref(false)
|
||
const loading = ref(false)
|
||
|
||
// 系统状态数据
|
||
const onlineUsers = ref('0/500')
|
||
const systemUptime = ref(t('common.loading'))
|
||
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 goToErrorStats = () => {
|
||
router.push('/admin/error-statistics')
|
||
}
|
||
|
||
const goToSettings = () => {
|
||
router.push('/system-settings')
|
||
}
|
||
|
||
// 处理用户头像下拉菜单
|
||
const handleUserCommand = (command) => {
|
||
if (command === 'exitAdmin') {
|
||
// 退出后台，返回个人首页
|
||
router.push('/profile')
|
||
}
|
||
}
|
||
|
||
// 格式化JWT过期时间显示
|
||
const formatJwtExpiration = (hours) => {
|
||
if (!hours) return ''
|
||
if (hours < 24) {
|
||
return `${hours}${t('apiManagement.hours')}`
|
||
} else if (hours < 720) {
|
||
const days = Math.floor(hours / 24)
|
||
const remainingHours = hours % 24
|
||
if (remainingHours === 0) {
|
||
return `${days}${t('apiManagement.days')}`
|
||
}
|
||
return `${days}${t('apiManagement.days')}${remainingHours}${t('apiManagement.hours')}`
|
||
} else {
|
||
return `30${t('apiManagement.days')}`
|
||
}
|
||
}
|
||
|
||
// 加载当前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(t('apiManagement.atLeastOneRequired') || '请至少输入API密钥或设置Token过期时间')
|
||
return
|
||
}
|
||
|
||
// 验证JWT过期时间范围
|
||
if (hasJwtExpiration && (apiForm.jwtExpirationHours < 1 || apiForm.jwtExpirationHours > 720)) {
|
||
ElMessage.warning(t('apiManagement.tokenRangeError') || 'Token过期时间必须在1-720小时之间')
|
||
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()
|
||
fetchSystemStats()
|
||
})
|
||
|
||
// 获取系统统计数据（当天访问人数和系统运行时间）
|
||
const fetchSystemStats = async () => {
|
||
try {
|
||
const response = await fetch('/api/admin/online-stats', {
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||
}
|
||
})
|
||
const data = await response.json()
|
||
if (data.success) {
|
||
onlineUsers.value = data.todayVisitors || 0
|
||
systemUptime.value = data.uptime || $t('systemSettings.unknown')
|
||
} else {
|
||
onlineUsers.value = '0'
|
||
systemUptime.value = $t('systemSettings.unknown')
|
||
}
|
||
} catch (error) {
|
||
console.error('Get online stats failed:', error)
|
||
onlineUsers.value = '0'
|
||
systemUptime.value = $t('systemSettings.unknown')
|
||
}
|
||
}
|
||
</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;
|
||
justify-content: center;
|
||
padding: 0 24px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.logo img {
|
||
width: 100%;
|
||
height: auto;
|
||
max-width: 180px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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>
|