first commit
This commit is contained in:
1312
src/pages/api/ApiDebugger.vue
Normal file
1312
src/pages/api/ApiDebugger.vue
Normal file
File diff suppressed because it is too large
Load Diff
10
src/pages/api/ApiManagement.vue
Normal file
10
src/pages/api/ApiManagement.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="api-management-page">
|
||||
<h1 class="text-3xl font-bold mb-6">API管理</h1>
|
||||
<p class="text-gray-600 mb-8">API管理页面 - 待开发</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// API管理页面 - 待开发
|
||||
</script>
|
||||
687
src/pages/api/Usage.vue
Normal file
687
src/pages/api/Usage.vue
Normal file
@@ -0,0 +1,687 @@
|
||||
<template>
|
||||
<ListPageLayout
|
||||
title="调用记录"
|
||||
subtitle="查看您的API调用历史记录"
|
||||
>
|
||||
<!-- 统计信息 -->
|
||||
<template #actions>
|
||||
<div class="flex gap-4">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.total_calls || 0 }}</div>
|
||||
<div class="stat-label">总调用次数</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #filters>
|
||||
<FilterSection>
|
||||
<FilterItem label="交易ID">
|
||||
<el-input
|
||||
v-model="filters.transaction_id"
|
||||
placeholder="输入交易ID"
|
||||
clearable
|
||||
@input="handleFilterChange"
|
||||
class="w-full"
|
||||
/>
|
||||
</FilterItem>
|
||||
|
||||
<FilterItem label="产品名称">
|
||||
<el-input
|
||||
v-model="filters.product_name"
|
||||
placeholder="输入产品名称"
|
||||
clearable
|
||||
@input="handleFilterChange"
|
||||
class="w-full"
|
||||
/>
|
||||
</FilterItem>
|
||||
|
||||
<FilterItem label="调用状态">
|
||||
<el-select
|
||||
v-model="filters.status"
|
||||
placeholder="选择状态"
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
class="w-full"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="成功" value="success" />
|
||||
<el-option label="失败" value="failed" />
|
||||
<el-option label="处理中" value="pending" />
|
||||
</el-select>
|
||||
</FilterItem>
|
||||
|
||||
<FilterItem label="时间范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="handleDateRangeChange"
|
||||
class="w-full"
|
||||
/>
|
||||
</FilterItem>
|
||||
|
||||
<template #stats>
|
||||
共找到 {{ total }} 条调用记录
|
||||
</template>
|
||||
|
||||
<template #buttons>
|
||||
<el-button @click="resetFilters">重置筛选</el-button>
|
||||
<el-button type="primary" @click="loadApiCalls">应用筛选</el-button>
|
||||
</template>
|
||||
</FilterSection>
|
||||
</template>
|
||||
|
||||
<template #table>
|
||||
<div v-if="loading" class="flex justify-center items-center py-12">
|
||||
<el-loading size="large" />
|
||||
</div>
|
||||
|
||||
<!-- <div v-else-if="apiCalls.length === 0" class="text-center py-12">
|
||||
<el-empty description="暂无调用记录">
|
||||
<el-button type="primary" @click="$router.push('/api')">
|
||||
前往开发者中心
|
||||
</el-button>
|
||||
</el-empty>
|
||||
</div> -->
|
||||
|
||||
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<el-table
|
||||
:data="apiCalls"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="product_name" label="接口名称" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<div class="font-medium text-blue-600">{{ row.product_name || '未知接口' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="getStatusType(row.status)"
|
||||
size="small"
|
||||
effect="light"
|
||||
>
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="error_msg" label="错误信息" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.translated_error_msg" class="error-info-cell">
|
||||
<div class="translated-error">
|
||||
{{ row.translated_error_msg }}
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--
|
||||
<el-table-column prop="cost" label="费用" width="100">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.cost" class="font-semibold text-red-600">¥{{ formatPrice(row.cost) }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column prop="client_ip" label="客户端IP" width="140">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ row.client_ip }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="start_at" label="调用时间" width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="text-sm">
|
||||
<div class="text-gray-900">{{ formatDate(row.start_at) }}</div>
|
||||
<div class="text-gray-500">{{ formatTime(row.start_at) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="end_at" label="完成时间" width="160">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.end_at" class="text-sm">
|
||||
<div class="text-gray-900">{{ formatDate(row.end_at) }}</div>
|
||||
<div class="text-gray-500">{{ formatTime(row.end_at) }}</div>
|
||||
</div>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center space-x-2">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleViewDetail(row)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<!-- 调用详情弹窗 -->
|
||||
<el-dialog
|
||||
v-model="detailDialogVisible"
|
||||
title="调用详情"
|
||||
width="800px"
|
||||
class="detail-dialog"
|
||||
>
|
||||
<div v-if="selectedApiCall" class="space-y-6">
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">交易ID</label>
|
||||
<span class="detail-value">{{ selectedApiCall.transaction_id }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">状态</label>
|
||||
<span class="detail-value">
|
||||
<el-tag :type="getStatusType(selectedApiCall.status)" size="small">
|
||||
{{ getStatusText(selectedApiCall.status) }}
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">接口名称</label>
|
||||
<span class="detail-value">{{ selectedApiCall.product_name || '未知接口' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">费用</label>
|
||||
<span class="detail-value">
|
||||
<span v-if="selectedApiCall.cost" class="text-red-600 font-semibold">¥{{ formatPrice(selectedApiCall.cost) }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">客户端IP</label>
|
||||
<span class="detail-value">{{ selectedApiCall.client_ip }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">调用时间</label>
|
||||
<span class="detail-value">{{ formatDateTime(selectedApiCall.start_at) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label class="detail-label">完成时间</label>
|
||||
<span class="detail-value">
|
||||
<span v-if="selectedApiCall.end_at">{{ formatDateTime(selectedApiCall.end_at) }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedApiCall.translated_error_msg" class="error-info">
|
||||
<h4 class="error-title">错误信息</h4>
|
||||
<div class="error-content">
|
||||
<div class="error-message">
|
||||
<div v-if="selectedApiCall.translated_error_msg" class="translated-error">
|
||||
{{ selectedApiCall.translated_error_msg }}
|
||||
</div>
|
||||
<div v-else class="original-error">
|
||||
{{ selectedApiCall.error_msg }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</ListPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { apiApi } from '@/api'
|
||||
import FilterItem from '@/components/common/FilterItem.vue'
|
||||
import FilterSection from '@/components/common/FilterSection.vue'
|
||||
import ListPageLayout from '@/components/common/ListPageLayout.vue'
|
||||
import { useCertification } from '@/composables/useCertification'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 认证相关
|
||||
const {
|
||||
isCertified,
|
||||
certificationLoading,
|
||||
requiresCertification,
|
||||
callProtectedAPI,
|
||||
canCallAPI
|
||||
} = useCertification()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const apiCalls = ref([])
|
||||
const total = ref(0)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const detailDialogVisible = ref(false)
|
||||
const selectedApiCall = ref(null)
|
||||
const dateRange = ref([])
|
||||
|
||||
// 统计数据
|
||||
const stats = ref({
|
||||
total_calls: 0,
|
||||
success_rate: '0%'
|
||||
})
|
||||
|
||||
// 筛选条件
|
||||
const filters = reactive({
|
||||
transaction_id: '',
|
||||
product_name: '',
|
||||
status: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
})
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadApiCalls()
|
||||
loadStats()
|
||||
})
|
||||
|
||||
// 加载API调用记录
|
||||
const loadApiCalls = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: currentPage.value,
|
||||
page_size: pageSize.value,
|
||||
...filters
|
||||
}
|
||||
|
||||
const response = await callProtectedAPI(apiApi.getUserApiCalls, params)
|
||||
if (response) {
|
||||
apiCalls.value = response.data?.items || []
|
||||
total.value = response.data?.total || 0
|
||||
} else {
|
||||
// 如果API调用被阻止，显示空数据
|
||||
apiCalls.value = []
|
||||
total.value = 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载API调用记录失败:', error)
|
||||
if (canCallAPI.value) {
|
||||
ElMessage.error('加载API调用记录失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载统计数据
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
// 计算统计数据
|
||||
stats.value = {
|
||||
total_calls: total.value
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化价格
|
||||
const formatPrice = (price) => {
|
||||
if (!price) return '0.00'
|
||||
return Number(price).toFixed(2)
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return '-'
|
||||
return new Date(date).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (date) => {
|
||||
if (!date) return '-'
|
||||
return new Date(date).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化日期时间
|
||||
const formatDateTime = (date) => {
|
||||
if (!date) return '-'
|
||||
return new Date(date).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 获取状态类型
|
||||
const getStatusType = (status) => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return 'success'
|
||||
case 'failed':
|
||||
return 'danger'
|
||||
case 'pending':
|
||||
return 'warning'
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return '成功'
|
||||
case 'failed':
|
||||
return '失败'
|
||||
case 'pending':
|
||||
return '处理中'
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
// 处理筛选变化
|
||||
const handleFilterChange = () => {
|
||||
currentPage.value = 1
|
||||
loadApiCalls()
|
||||
}
|
||||
|
||||
// 处理时间范围变化
|
||||
const handleDateRangeChange = (range) => {
|
||||
if (range && range.length === 2) {
|
||||
filters.start_time = range[0]
|
||||
filters.end_time = range[1]
|
||||
} else {
|
||||
filters.start_time = ''
|
||||
filters.end_time = ''
|
||||
}
|
||||
currentPage.value = 1
|
||||
loadApiCalls()
|
||||
}
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
Object.keys(filters).forEach(key => {
|
||||
filters[key] = ''
|
||||
})
|
||||
dateRange.value = []
|
||||
currentPage.value = 1
|
||||
loadApiCalls()
|
||||
}
|
||||
|
||||
// 处理分页大小变化
|
||||
const handleSizeChange = (size) => {
|
||||
pageSize.value = size
|
||||
currentPage.value = 1
|
||||
loadApiCalls()
|
||||
}
|
||||
|
||||
// 处理当前页变化
|
||||
const handleCurrentChange = (page) => {
|
||||
currentPage.value = page
|
||||
loadApiCalls()
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (apiCall) => {
|
||||
selectedApiCall.value = apiCall
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 统计项样式 */
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
border-radius: 12px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
.detail-dialog :deep(.el-dialog) {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.el-dialog__header) {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.el-dialog__title) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.el-dialog__footer) {
|
||||
background: rgba(248, 250, 252, 0.5);
|
||||
border-top: 1px solid rgba(226, 232, 240, 0.4);
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
/* 详情项样式 */
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 16px;
|
||||
color: #1e293b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 错误信息样式 */
|
||||
.error-info {
|
||||
background: rgba(254, 242, 242, 0.8);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #dc2626;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
space-y: 2;
|
||||
}
|
||||
|
||||
.error-type {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #dc2626;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 14px;
|
||||
color: #7f1d1d;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.translated-error {
|
||||
font-weight: 500;
|
||||
color: #dc2626;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.original-error {
|
||||
font-size: 13px;
|
||||
color: #991b1b;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error-info-cell {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.error-info-cell .translated-error {
|
||||
font-weight: 500;
|
||||
color: #dc2626;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.error-info-cell .original-error {
|
||||
font-size: 12px;
|
||||
color: #991b1b;
|
||||
font-style: italic;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 信息区域样式 */
|
||||
.request-info,
|
||||
.response-info {
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(226, 232, 240, 0.4);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.json-content {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
:deep(.el-table) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background: #f8fafc !important;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
:deep(.el-table tr:hover > td) {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.stat-item {
|
||||
padding: 12px 16px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
437
src/pages/api/WhiteList.vue
Normal file
437
src/pages/api/WhiteList.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<ListPageLayout
|
||||
title="白名单管理"
|
||||
subtitle="管理您的API访问IP白名单，最多可添加10个IP地址"
|
||||
>
|
||||
<template #actions>
|
||||
<el-button type="primary" @click="showAddForm = true">
|
||||
<PlusIcon class="w-4 h-4 mr-1" />
|
||||
添加IP地址
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #filters>
|
||||
<FilterSection>
|
||||
<FilterItem label="IP地址搜索">
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
placeholder="输入IP地址进行搜索"
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
class="w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<ComputerDesktopIcon class="w-4 h-4 text-gray-400" />
|
||||
</template>
|
||||
</el-input>
|
||||
</FilterItem>
|
||||
|
||||
<FilterItem label="状态筛选">
|
||||
<el-select
|
||||
v-model="filters.status"
|
||||
placeholder="选择状态"
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
class="w-full"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="已添加" value="active" />
|
||||
<el-option label="待添加" value="pending" />
|
||||
</el-select>
|
||||
</FilterItem>
|
||||
|
||||
<template #stats>
|
||||
共找到 {{ whiteListData.length }}/10 个IP地址
|
||||
</template>
|
||||
|
||||
<template #buttons>
|
||||
<el-button @click="resetFilters">重置筛选</el-button>
|
||||
<el-button type="primary" @click="loadWhiteList">应用筛选</el-button>
|
||||
</template>
|
||||
</FilterSection>
|
||||
</template>
|
||||
|
||||
<template #table>
|
||||
<div v-if="loading" class="flex justify-center items-center py-12">
|
||||
<el-loading size="large" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="whiteListData.length === 0" class="text-center py-12">
|
||||
<el-empty description="暂无白名单IP地址">
|
||||
<template #image>
|
||||
<ShieldCheckIcon class="w-16 h-16 text-gray-400" />
|
||||
</template>
|
||||
<p class="text-gray-500 mt-2">添加IP地址到白名单以允许API访问</p>
|
||||
<el-button type="primary" @click="showAddForm = true" class="mt-4">
|
||||
<PlusIcon class="w-4 h-4 mr-1" />
|
||||
添加第一个IP地址
|
||||
</el-button>
|
||||
</el-empty>
|
||||
</div>
|
||||
|
||||
<div v-else class="white-list-table">
|
||||
<el-table :data="whiteListData" stripe>
|
||||
<el-table-column prop="ip_address" label="IP地址" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center">
|
||||
<ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
|
||||
<span class="font-mono text-sm">{{ row.ip_address }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="created_at" label="添加时间" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center">
|
||||
<CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
|
||||
<span class="text-sm">{{ formatDate(row.created_at) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="120">
|
||||
<template #default>
|
||||
<el-tag type="success" size="small">
|
||||
<span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDeleteIP(row.ip_address)"
|
||||
:loading="deleteLoading === row.ip_address"
|
||||
>
|
||||
<TrashIcon class="w-3 h-3 mr-1" />
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<!-- 添加IP地址弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showAddForm"
|
||||
title="添加IP地址"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="addFormRef"
|
||||
:model="addForm"
|
||||
:rules="addFormRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="IP地址" prop="ipAddress">
|
||||
<el-input
|
||||
v-model="addForm.ipAddress"
|
||||
placeholder="请输入IP地址，如：192.168.1.1"
|
||||
:disabled="whiteListData.length >= 10"
|
||||
>
|
||||
<template #prefix>
|
||||
<ComputerDesktopIcon class="w-4 h-4 text-gray-400" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="whiteListData.length >= 10">
|
||||
<el-alert
|
||||
title="白名单已满"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #default>
|
||||
<p>您已达到白名单数量上限（10个），请先删除不需要的IP地址后再添加新的。</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<el-button @click="showAddForm = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleAddIP"
|
||||
:loading="addLoading"
|
||||
:disabled="whiteListData.length >= 10"
|
||||
>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 使用说明卡片 -->
|
||||
<div class="mt-6">
|
||||
<el-card class="help-card">
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<QuestionMarkCircleIcon class="w-5 h-5 mr-2 text-orange-600" />
|
||||
<span class="text-lg font-semibold">使用说明</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="help-content">
|
||||
<div class="help-item">
|
||||
<h4 class="help-title">什么是白名单？</h4>
|
||||
<p class="help-text">
|
||||
白名单是API访问的安全机制，只有添加到白名单中的IP地址才能调用您的API接口。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="help-item">
|
||||
<h4 class="help-title">如何添加IP地址？</h4>
|
||||
<p class="help-text">
|
||||
点击"添加IP地址"按钮，在弹窗中输入有效的IP地址（支持IPv4格式），点击"添加"即可。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="help-item">
|
||||
<h4 class="help-title">数量限制</h4>
|
||||
<p class="help-text">
|
||||
每个用户最多可添加10个IP地址到白名单中，超出限制需要先删除不需要的IP地址。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="help-item">
|
||||
<h4 class="help-title">安全提醒</h4>
|
||||
<p class="help-text">
|
||||
请确保只添加您信任的IP地址，避免将API访问权限泄露给未授权的服务器。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</ListPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { whiteListApi } from '@/api'
|
||||
import FilterItem from '@/components/common/FilterItem.vue'
|
||||
import FilterSection from '@/components/common/FilterSection.vue'
|
||||
import ListPageLayout from '@/components/common/ListPageLayout.vue'
|
||||
import { useCertification } from '@/composables/useCertification'
|
||||
import {
|
||||
CalendarIcon,
|
||||
ComputerDesktopIcon,
|
||||
PlusIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
ShieldCheckIcon,
|
||||
TrashIcon
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
// 认证相关
|
||||
const {
|
||||
isCertified,
|
||||
certificationLoading,
|
||||
requiresCertification,
|
||||
callProtectedAPI,
|
||||
canCallAPI
|
||||
} = useCertification()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const addLoading = ref(false)
|
||||
const deleteLoading = ref('')
|
||||
const whiteListData = ref([])
|
||||
const addFormRef = ref()
|
||||
const showAddForm = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const addForm = reactive({
|
||||
ipAddress: ''
|
||||
})
|
||||
|
||||
// 筛选条件
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const addFormRules = {
|
||||
ipAddress: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
|
||||
message: '请输入有效的IPv4地址格式',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 搜索防抖
|
||||
let searchTimer = null
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
loadWhiteList()
|
||||
})
|
||||
|
||||
// 获取白名单列表
|
||||
const loadWhiteList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await callProtectedAPI(whiteListApi.getWhiteList)
|
||||
if (response) {
|
||||
whiteListData.value = response.data.items || []
|
||||
} else {
|
||||
// 如果API调用被阻止，显示空数据
|
||||
whiteListData.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取白名单失败:', error)
|
||||
if (canCallAPI.value) {
|
||||
ElMessage.error('获取白名单失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 添加IP地址
|
||||
const handleAddIP = async () => {
|
||||
if (!addFormRef.value) return
|
||||
|
||||
try {
|
||||
await addFormRef.value.validate()
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
|
||||
if (whiteListData.value.length >= 10) {
|
||||
ElMessage.warning('白名单已满，请先删除不需要的IP地址')
|
||||
return
|
||||
}
|
||||
|
||||
addLoading.value = true
|
||||
try {
|
||||
const response = await callProtectedAPI(whiteListApi.addWhiteListIP, addForm.ipAddress)
|
||||
if (response) {
|
||||
ElMessage.success('添加IP地址成功')
|
||||
addForm.ipAddress = ''
|
||||
showAddForm.value = false
|
||||
await loadWhiteList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加IP地址失败:', error)
|
||||
if (canCallAPI.value) {
|
||||
ElMessage.error(error.response?.data?.message || '添加IP地址失败')
|
||||
}
|
||||
} finally {
|
||||
addLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 删除IP地址
|
||||
const handleDeleteIP = async (ipAddress) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除IP地址 "${ipAddress}" 吗？`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
deleteLoading.value = ipAddress
|
||||
try {
|
||||
const response = await callProtectedAPI(whiteListApi.deleteWhiteListIP, ipAddress)
|
||||
if (response) {
|
||||
ElMessage.success('删除IP地址成功')
|
||||
await loadWhiteList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除IP地址失败:', error)
|
||||
if (canCallAPI.value) {
|
||||
ElMessage.error(error.response?.data?.message || '删除IP地址失败')
|
||||
}
|
||||
} finally {
|
||||
deleteLoading.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 处理筛选变化
|
||||
const handleFilterChange = () => {
|
||||
loadWhiteList()
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = () => {
|
||||
if (searchTimer) {
|
||||
clearTimeout(searchTimer)
|
||||
}
|
||||
searchTimer = setTimeout(() => {
|
||||
loadWhiteList()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
filters.keyword = ''
|
||||
filters.status = ''
|
||||
loadWhiteList()
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-'
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.help-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.help-item {
|
||||
padding: 16px;
|
||||
border-left: 4px solid #409eff;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.help-title {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.help-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user