495 lines
18 KiB
HTML
495 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html class="x-admin-sm">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>银河锋锐工作室账户后台系统</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<link rel="stylesheet" href="/css/font.css">
|
||
<link rel="stylesheet" href="/css/xadmin.css">
|
||
<link rel="stylesheet" href="/css/win10ui.css">
|
||
<link rel="stylesheet" href="/css/theme.css">
|
||
<link rel="stylesheet" href="/css/api.css">
|
||
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
||
<script type="text/javascript" src="/js/xadmin.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
||
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
<script>window.breadcrumbs = [{name: "首页", url: ""},{name: "产品", url: ""},{name: "API"}];</script>
|
||
<script src="/js/address.bar.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="main-container">
|
||
<div class="dashboard-header">
|
||
<h1 class="dashboard-title">API 服务控制面板</h1>
|
||
<div class="api-tabs">
|
||
<div class="api-tab active" data-tab="overview">概览</div>
|
||
<div class="api-tab" data-tab="monitor">运维监控</div>
|
||
<div class="api-tab" data-tab="cost">费用与成本</div>
|
||
<div class="api-tab" data-tab="benefits">我的权益</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-row">
|
||
<div class="main-content">
|
||
<!-- 概览选项卡 -->
|
||
<div id="overview-tab" class="tab-content">
|
||
<div class="filter-area">
|
||
<div class="filter-row">
|
||
<div class="layui-form">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">API分类</label>
|
||
<div class="layui-input-inline">
|
||
<select name="category" lay-filter="category">
|
||
<option value="">全部</option>
|
||
<option value="1">支付接口</option>
|
||
<option value="2">短信服务</option>
|
||
<option value="3">地图服务</option>
|
||
<option value="4">人工智能</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">状态</label>
|
||
<div class="layui-input-inline">
|
||
<select name="status" lay-filter="status">
|
||
<option value="">全部</option>
|
||
<option value="1">正常</option>
|
||
<option value="2">即将到期</option>
|
||
<option value="3">已过期</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="api-grid" id="api-list">
|
||
<!-- API卡片将通过JS动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 运维监控选项卡 -->
|
||
<div id="monitor-tab" class="tab-content" style="display: none;">
|
||
<div class="filter-area">
|
||
<div class="layui-form">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">时间范围</label>
|
||
<div class="layui-input-inline">
|
||
<select name="time-range">
|
||
<option value="7">最近7天</option>
|
||
<option value="30" selected>最近30天</option>
|
||
<option value="90">最近90天</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card" style="margin-bottom: 20px;">
|
||
<div class="layui-card-header">API调用趋势</div>
|
||
<div class="layui-card-body" style="padding: 20px; min-height: 300px; text-align: center;">
|
||
<i class="layui-icon layui-icon-chart" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 16px; margin-top: 15px;">API调用监控图表</div>
|
||
<div style="color: #999; margin-top: 10px;">这里将展示API调用量的趋势图表</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">调用量TOP5</div>
|
||
<div class="layui-card-body" style="padding: 20px; min-height: 300px; text-align: center;">
|
||
<i class="layui-icon layui-icon-list" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 16px; margin-top: 15px;">调用量排名</div>
|
||
<div style="color: #999; margin-top: 10px;">这里将展示调用量最高的API</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">错误率TOP5</div>
|
||
<div class="layui-card-body" style="padding: 20px; min-height: 300px; text-align: center;">
|
||
<i class="layui-icon layui-icon-face-cry" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 16px; margin-top: 15px;">错误率排名</div>
|
||
<div style="color: #999; margin-top: 10px;">这里将展示错误率最高的API</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 费用与成本选项卡 -->
|
||
<div id="cost-tab" class="tab-content" style="display: none;">
|
||
<div class="filter-area">
|
||
<div class="layui-form">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">时间范围</label>
|
||
<div class="layui-input-inline">
|
||
<select name="cost-time-range">
|
||
<option value="1">本月</option>
|
||
<option value="2">上月</option>
|
||
<option value="3">本季度</option>
|
||
<option value="4" selected>本年</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card" style="margin-bottom: 20px;">
|
||
<div class="layui-card-header">费用趋势</div>
|
||
<div class="layui-card-body" style="padding: 20px; min-height: 300px; text-align: center;">
|
||
<i class="layui-icon layui-icon-chart-screen" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 16px; margin-top: 15px;">API费用分析</div>
|
||
<div style="color: #999; margin-top: 10px;">这里将展示API使用费用的趋势和分析</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">费用分布</div>
|
||
<div class="layui-card-body" style="padding: 20px; min-height: 300px; text-align: center;">
|
||
<i class="layui-icon layui-icon-piechart" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 16px; margin-top: 15px;">费用分布</div>
|
||
<div style="color: #999; margin-top: 10px;">这里将展示各类API的费用占比</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">成本优化建议</div>
|
||
<div class="layui-card-body" style="padding: 20px; min-height: 300px; text-align: center;">
|
||
<i class="layui-icon layui-icon-tips" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 16px; margin-top: 15px;">优化建议</div>
|
||
<div style="color: #999; margin-top: 10px;">这里将提供成本优化建议</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的权益选项卡 -->
|
||
<div id="benefits-tab" class="tab-content" style="display: none;">
|
||
<div class="layui-card" style="margin-bottom: 20px;">
|
||
<div class="layui-card-header">我的权益</div>
|
||
<div class="layui-card-body" style="padding: 30px; text-align: center;">
|
||
<i class="layui-icon layui-icon-user" style="font-size: 50px; color: #1E9FFF;"></i>
|
||
<div style="font-size: 18px; margin-top: 15px;">会员等级: 高级会员</div>
|
||
<div style="color: #666; margin-top: 10px;">有效期至: 2024-12-31</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">API调用权益</div>
|
||
<div class="layui-card-body">
|
||
<ul class="layui-timeline">
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">基础调用额度</h3>
|
||
<p>每月免费调用次数: 10,000次</p>
|
||
<p>超额费率: 0.01元/次</p>
|
||
</div>
|
||
</li>
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">并发限制</h3>
|
||
<p>最大并发数: 50</p>
|
||
</div>
|
||
</li>
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">数据保留</h3>
|
||
<p>日志保留期: 90天</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">专属服务</div>
|
||
<div class="layui-card-body">
|
||
<ul class="layui-timeline">
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">技术支持</h3>
|
||
<p>7×24小时专属技术支持</p>
|
||
<p>响应时间: 1小时内</p>
|
||
</div>
|
||
</li>
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">专属客户经理</h3>
|
||
<p>一对一客户服务</p>
|
||
</div>
|
||
</li>
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">优先体验</h3>
|
||
<p>新功能优先体验权</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧边栏 -->
|
||
<div class="sidebar">
|
||
<div class="sidebar-card">
|
||
<div class="sidebar-header">
|
||
<i class="layui-icon layui-icon-console"></i>运维概览
|
||
</div>
|
||
<div class="sidebar-body">
|
||
<div class="stats-item">
|
||
<div class="stats-label">API总数</div>
|
||
<div class="stats-value">12</div>
|
||
</div>
|
||
<div class="stats-item">
|
||
<div class="stats-label">今日调用量</div>
|
||
<div class="stats-value primary">1,245次</div>
|
||
</div>
|
||
<div class="stats-item">
|
||
<div class="stats-label">异常API</div>
|
||
<div class="stats-value danger">2个</div>
|
||
</div>
|
||
<div class="stats-item">
|
||
<div class="stats-label">系统状态</div>
|
||
<div class="stats-value success">运行正常</div>
|
||
</div>
|
||
<div class="stats-item">
|
||
<div class="stats-label">最近告警</div>
|
||
<div class="stats-value warning">1条未处理</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<div class="sidebar-header">
|
||
<i class="layui-icon layui-icon-notice"></i>公告通知
|
||
</div>
|
||
<div class="sidebar-body">
|
||
<div class="stats-item">
|
||
<div class="stats-label">系统升级</div>
|
||
<div class="stats-value">计划于6月15日进行系统维护</div>
|
||
</div>
|
||
<div class="stats-item">
|
||
<div class="stats-label">新功能</div>
|
||
<div class="stats-value">API监控面板已上线</div>
|
||
</div>
|
||
<div class="stats-item">
|
||
<div class="stats-label">优惠活动</div>
|
||
<div class="stats-value">续费可享8折优惠</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<div class="sidebar-header">
|
||
<i class="layui-icon layui-icon-service"></i>快速入口
|
||
</div>
|
||
<div class="sidebar-body">
|
||
<button class="layui-btn layui-btn-fluid layui-btn-primary" style="margin-bottom: 10px;">
|
||
<i class="layui-icon layui-icon-add-1"></i> 购买新API
|
||
</button>
|
||
<button class="layui-btn layui-btn-fluid" style="margin-bottom: 10px; background-color: #1E9FFF;">
|
||
<i class="layui-icon layui-icon-form"></i> 申请发票
|
||
</button>
|
||
<button class="layui-btn layui-btn-fluid layui-btn-normal">
|
||
<i class="layui-icon layui-icon-help"></i> 联系支持
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
layui.use(['jquery', 'form', 'element'], function() {
|
||
var $ = layui.jquery;
|
||
var form = layui.form;
|
||
var element = layui.element;
|
||
// 模拟API数据
|
||
var apiData = [{
|
||
id: 1,
|
||
name: "支付宝支付接口",
|
||
category: "支付接口",
|
||
description: "提供支付宝支付能力，支持多种支付场景，包括APP支付、网页支付等",
|
||
status: "normal",
|
||
expire: "2023-12-31",
|
||
callCount: 1250,
|
||
quota: 5000
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "腾讯云短信服务",
|
||
category: "短信服务",
|
||
description: "提供短信发送能力，支持验证码、通知类短信，高到达率",
|
||
status: "warning",
|
||
expire: "2023-06-30",
|
||
callCount: 3200,
|
||
quota: 10000
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "百度地图API",
|
||
category: "地图服务",
|
||
description: "提供地图展示、定位、路线规划等功能，覆盖全国精准地图数据",
|
||
status: "normal",
|
||
expire: "2024-01-31",
|
||
callCount: 780,
|
||
quota: 3000
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "人脸识别API",
|
||
category: "人工智能",
|
||
description: "提供人脸检测、比对、搜索等功能，识别准确率高达99.7%",
|
||
status: "danger",
|
||
expire: "2023-03-31",
|
||
callCount: 420,
|
||
quota: 1000
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "微信支付接口",
|
||
category: "支付接口",
|
||
description: "提供微信支付能力，支持小程序支付、H5支付等场景",
|
||
status: "normal",
|
||
expire: "2023-11-30",
|
||
callCount: 2100,
|
||
quota: 8000
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "阿里云短信服务",
|
||
category: "短信服务",
|
||
description: "提供稳定可靠的短信发送服务，支持全球200+国家地区",
|
||
status: "normal",
|
||
expire: "2023-10-15",
|
||
callCount: 1500,
|
||
quota: 5000
|
||
}
|
||
];
|
||
|
||
// 渲染API卡片
|
||
function renderApiCards(data) {
|
||
var html = '';
|
||
data.forEach(function(item) {
|
||
var statusClass = '';
|
||
var statusText = '';
|
||
if (item.status === 'normal') {
|
||
statusClass = 'status-normal';
|
||
statusText = '正常';
|
||
} else if (item.status === 'warning') {
|
||
statusClass = 'status-warning';
|
||
statusText = '即将到期';
|
||
} else {
|
||
statusClass = 'status-danger';
|
||
statusText = '已过期';
|
||
}
|
||
|
||
var progress = Math.min(100, Math.round(item.callCount / item.quota * 100));
|
||
var progressClass = progress > 80 ? 'layui-bg-danger' : (progress > 50 ? 'layui-bg-warning' : 'layui-bg-primary');
|
||
|
||
html += `
|
||
<div class="api-card">
|
||
<div class="api-card-header">
|
||
<div class="api-name">${item.name}</div>
|
||
<span class="api-status ${statusClass}">${statusText}</span>
|
||
</div>
|
||
<div class="api-card-body">
|
||
<div class="api-description">${item.description}</div>
|
||
<div class="usage-container">
|
||
<div class="usage-label">
|
||
<span>调用量</span>
|
||
<span>${item.callCount}/${item.quota}</span>
|
||
</div>
|
||
<div class="layui-progress">
|
||
<div class="layui-progress-bar ${progressClass}" lay-percent="${progress}%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="api-card-footer">
|
||
<div class="expire-date">到期: ${item.expire}</div>
|
||
<div class="console-link" data-id="${item.id}">控制台 ></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
$('#api-list')
|
||
.html(html);
|
||
element.render('progress');
|
||
}
|
||
// 初始化渲染
|
||
renderApiCards(apiData);
|
||
// 点击控制台
|
||
$(document)
|
||
.on('click', '.console-link', function() {
|
||
var apiId = $(this)
|
||
.data('id');
|
||
layer.open({
|
||
type: 2,
|
||
title: 'API控制台',
|
||
area: ['800px', '600px'],
|
||
content: '/api/console?id=' + apiId // 替换为实际的控制台页面URL
|
||
});
|
||
});
|
||
// 选项卡切换
|
||
$('.api-tab')
|
||
.on('click', function() {
|
||
var tabId = $(this)
|
||
.data('tab');
|
||
$('.api-tab')
|
||
.removeClass('active');
|
||
$(this)
|
||
.addClass('active');
|
||
$('.tab-content')
|
||
.hide();
|
||
$('#' + tabId + '-tab')
|
||
.show();
|
||
});
|
||
// 筛选条件变化
|
||
form.on('select(category)', function(data) {
|
||
filterApis();
|
||
});
|
||
form.on('select(status)', function(data) {
|
||
filterApis();
|
||
});
|
||
// 筛选API
|
||
function filterApis() {
|
||
var category = $('select[name="category"]')
|
||
.val();
|
||
var status = $('select[name="status"]')
|
||
.val();
|
||
var filteredData = apiData.filter(function(item) {
|
||
var match = true;
|
||
if (category && item.category !== category) match = false;
|
||
if (status) {
|
||
if (status == '1' && item.status !== 'normal') match = false;
|
||
if (status == '2' && item.status !== 'warning') match = false;
|
||
if (status == '3' && item.status !== 'danger') match = false;
|
||
}
|
||
return match;
|
||
});
|
||
renderApiCards(filteredData);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |