kaku/PyGetGPT
1
0
Fork 0
mirror of https://github.com/Kakune55/PyGetGPT.git synced 2025-05-06 18:29:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

为后台管理添加菜单栏

Browse Source
This commit is contained in:
Kakune55 2024-01-11 22:57:14 +08:00
parent 8e086129b7
commit dc9d9d9369
9 changed files with 311 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/index.css
View File

@ -7,7 +7,7 @@ body {
height: 100vh; height: 100vh;
margin: 0; margin: 0;
background-image: url("../static/img/bg_circles.png"); background-image: url("../static/img/bg_circles.png");
background-repeat: repeat; background-repeat: repeat;
} }
#chat-container { #chat-container {
width: 80%; /* 使用百分比宽度 */ width: 80%; /* 使用百分比宽度 */

52
static/menu.css Normal file
View File

@ -0,0 +1,52 @@
body {
margin: 0;
font-family: 'Arial', sans-serif;
overflow-x: hidden;
}
#sidebar {
height: 100vh;
width: 250px;
position: fixed;
top: 0;
left: -200px;
background-color: #006699;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
color: white;
z-index: 2; /* 保证遮罩在页面上方 */
}
#sidebar a {
padding: 15px 10px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: 0.3s;
}
#sidebar a:hover {
background-color: #3366CC;
}
#main {
padding: 30px;
padding-left: 80px;
}
#global-blur {
background-color: rgba(255, 255, 255, 0);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(8px); /* 模糊度可以根据需要调整 */
transition: display;
z-index: 1; /* 保证遮罩在页面上方 */
pointer-events: none; /* 确保遮罩不影响下方元素的交互 */
opacity: 0;
transition: opacity 0.3s ease
}

9
static/menu.js Normal file
View File

@ -0,0 +1,9 @@
function openNav() {
document.getElementById("sidebar").style.left = "0";
document.getElementById("global-blur").style.opacity = 1;
}
function closeNav() {
document.getElementById("sidebar").style.left = "-200px";
document.getElementById("global-blur").style.opacity = 0;
}

68
templates/Echarts.html
View File

@ -1,68 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="../static/echarts.min.js"></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f7f7f7;
padding: 20px;
}
</style>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
const apiURL = '/api/modelcount';
datajson = null
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//使用fetch API发送GET请求
fetch(apiURL)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 确保返回的是JSON对象
})
.then(data => {
// 确保 data 是一个数组，并且每个元素都有 value 和 name 属性
if (data && Array.isArray(data) && data.every(item => item.value && item.name)) {
myChart.setOption({
title: {
text: '模型调用',
left: 'center',
top: 'center',
textStyle:{
fontSize: '25',
fontWeight:'bold'
}
},
series: [{
name: '模型调用',
type: 'pie',
radius: '55%',
data: data,
radius: ['30%', '65%'],
label: {
show: true, //开启显示
fontSize: '16',
formatter: '{b}:{c}' + '\n\r' + '({d}%)',
fontWeight:'bold'
}
}]
});
} else {
console.error('Data received is not in the correct format for ECharts pie chart:', data);
}
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
</script>
</body>
</html>

79
templates/createKey.html
View File

@ -4,6 +4,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>创建密钥</title> <title>创建密钥</title>
<link rel="stylesheet" type="text/css" href="../static/menu.css">
<script src="../static/echarts.min.js"></script>
<style> <style>
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -21,41 +23,52 @@
</head> </head>
<body> <body>
<div class="container"> <div id="global-blur"></div>
<h2>创建单个密钥</h2> <div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<form method="post"> <a href="/admin" class="nodecoration">仪表盘</a>
<span>密钥</span> <a href="/admin/list" class="nodecoration">列出所有Key</a>
<input name="key" required> <a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<span>配额</span> <a href="/admin/createkey" class="nodecoration">创建密钥</a>
<input name="quota" required> <a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<button type="submit">创建</button> <!-- 添加更多菜单项 -->
</form>
</div> </div>
<hr>
<div class="container">
<h2>批量创建密钥</h2>
<form method="post">
<input type="radio" id="type" name="type" value="uuid" checked="true">
<label for="type">使用UUID</label><br>
<span>个数</span>
<input name="number" required>
<span>配额</span>
<input name="quota" required>
<button type="submit">批量创建</button>
</form>
</div>
{% if resq != "null" %}
<hr>
<div class="container">
<h2>执行结果</h2>
{% for i in resq %}
<h4>{{ i }}</h4>
{% endfor %}
</div>
{% endif %}
<script>
</script> <div id="main">
<div class="container">
<h2>创建单个密钥</h2>
<form method="post">
<span>密钥</span>
<input name="key" required>
<span>配额</span>
<input name="quota" required>
<button type="submit">创建</button>
</form>
</div>
<hr>
<div class="container">
<h2>批量创建密钥</h2>
<form method="post">
<input type="radio" id="type" name="type" value="uuid" checked="true">
<label for="type">使用UUID</label><br>
<span>个数</span>
<input name="number" required>
<span>配额</span>
<input name="quota" required>
<button type="submit">批量创建</button>
</form>
</div>
{% if resq != "null" %}
<hr>
<div class="container">
<h2>执行结果</h2>
{% for i in resq %}
<h4>{{ i }}</h4>
{% endfor %}
</div>
{% endif %}
</div>
<script src="../static/menu.js"></script>
</body> </body>
</html> </html>

61
templates/keylist.html
View File

@ -4,6 +4,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>列出密钥</title> <title>列出密钥</title>
<link rel="stylesheet" type="text/css" href="../static/menu.css">
<script src="../static/echarts.min.js"></script>
<style> <style>
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -37,32 +39,43 @@
</head> </head>
<body> <body>
<div class="container"> <div id="global-blur"></div>
<h2>列出密钥</h2> <div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<table> <a href="/admin" class="nodecoration">仪表盘</a>
<thead> <a href="/admin/list" class="nodecoration">列出所有Key</a>
<tr> <a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<th>Key</th> <a href="/admin/createkey" class="nodecoration">创建密钥</a>
<th>剩余Tokens</th> <a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<th>操作</th> <!-- 添加更多菜单项 -->
</tr>
</thead>
<tbody>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td><a href="/admin/operate?type=del&target={{item[0]}}">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
<hr/>
<script> <div id="main">
// 在这里可以添加一些交互逻辑，例如点击某个状态显示更多信息 <div class="container">
</script> <h2>列出密钥</h2>
<table>
<thead>
<tr>
<th>Key</th>
<th>剩余Tokens</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td><a href="/admin/operate?type=del&target={{item[0]}}">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<hr />
</div>
<script src="../static/menu.js"></script>
</body> </body>
</html> </html>

68
templates/loglist.html
View File

@ -4,6 +4,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>列出日志</title> <title>列出日志</title>
<link rel="stylesheet" type="text/css" href="../static/menu.css">
<script src="../static/echarts.min.js"></script>
<style> <style>
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -37,36 +39,46 @@
</head> </head>
<body> <body>
<div class="container"> <div id="global-blur"></div>
<h2>列出日志</h2> <div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<table> <a href="/admin" class="nodecoration">仪表盘</a>
<thead> <a href="/admin/list" class="nodecoration">列出所有Key</a>
<tr> <a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<th>IP</th> <a href="/admin/createkey" class="nodecoration">创建密钥</a>
<th>时间</th> <a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<th>token用量</th> <!-- 添加更多菜单项 -->
<th>使用模型</th>
<th>UserKey</th>
</tr>
</thead>
<tbody>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>{{item[4]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
<hr/>
<script> <div id="main">
// 在这里可以添加一些交互逻辑，例如点击某个状态显示更多信息 <div class="container">
</script> <h2>列出日志</h2>
<table>
<thead>
<tr>
<th>IP</th>
<th>时间</th>
<th>token用量</th>
<th>使用模型</th>
<th>UserKey</th>
</tr>
</thead>
<tbody>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>{{item[4]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<hr />
</div>
<script src="../static/menu.js"></script>
</body> </body>
</html> </html>

49
templates/lookupKey.html
View File

@ -4,6 +4,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>查询密钥</title> <title>查询密钥</title>
<link rel="stylesheet" type="text/css" href="../static/menu.css">
<script src="../static/echarts.min.js"></script>
<style> <style>
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -21,28 +23,39 @@
</head> </head>
<body> <body>
<div class="container"> <div id="global-blur"></div>
<h2>查询密钥</h2> <div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<form method="post"> <a href="/admin" class="nodecoration">仪表盘</a>
<span>UserKey</span> <a href="/admin/list" class="nodecoration">列出所有Key</a>
<input name="key" required> <a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<button type="submit">查询</button> <a href="/admin/createkey" class="nodecoration">创建密钥</a>
</form> <a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<!-- 添加更多菜单项 -->
</div> </div>
{% if resq != "null" %}
<hr> <div id="main">
<div class="container"> <div class="container">
<h2>执行结果</h2> <h2>查询密钥</h2>
{% if resq == -99999 %} <form method="post">
<h4>未找到UserKey</h4> <span>UserKey</span>
{% else %} <input name="key" required>
<h4>配额剩余 {{ resq }}</h4> <button type="submit">查询</button>
</form>
</div>
{% if resq != "null" %}
<hr>
<div class="container">
<h2>执行结果</h2>
{% if resq == -99999 %}
<h4>未找到UserKey</h4>
{% else %}
<h4>配额剩余 {{ resq }}</h4>
{% endif %}
</div>
{% endif %} {% endif %}
</div> </div>
{% endif %}
<script>
</script> <script src="../static/menu.js"></script>
</body> </body>
</html> </html>

158
templates/status.html
View File

@ -4,6 +4,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>后台管理</title> <title>后台管理</title>
<link rel="stylesheet" type="text/css" href="../static/menu.css">
<script src="../static/echarts.min.js"></script>
<style> <style>
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -42,78 +44,108 @@
color: red; color: red;
} }
.nodecoration{ .nodecoration {
text-decoration: none; text-decoration: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div id="global-blur"></div>
<h2>概况</h2> <div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
{% include 'Echarts.html' %} <a href="/admin" class="nodecoration">仪表盘</a>
</div> <a href="/admin/list" class="nodecoration">列出所有Key</a>
<hr/> <a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<div class="container"> <a href="/admin/createkey" class="nodecoration">创建密钥</a>
<h2>状态</h2> <a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<table> <!-- 添加更多菜单项 -->
<thead>
<tr>
<th>项目</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>开发者心态</td>
<td class="green">正常</td>
</tr>
<tr>
<td>数据库连接</td>
{% if status["db"] == True %}
<td class="green">正常</td>
{% else %}
<td class="red">连接异常</td>
{% endif %}
</tr>
<tr>
<td>开发者大脑负载</td>
<td class="red">较高</td>
</tr>
</tbody>
</table>
</div>
<hr/>
<div class="container">
<h2>管理</h2>
<table>
<thead>
<tr>
<th>项目</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/admin/list" class="nodecoration">列出所有Key</a></td>
</tr>
<tr>
<td><a href="/admin/lookupkey" class="nodecoration">查询密钥</a></td>
</tr>
<tr>
<td><a href="/admin/createkey" class="nodecoration">创建密钥</a></td>
</tr>
<tr>
<td><a href="/admin/log?show=500" class="nodecoration">查看日志</a></td>
</tr>
<tr>
<td>阿巴阿巴</td>
</tr>
</tbody>
</table>
</div> </div>
<script> <div id="main">
<div class="container">
<h2>概况</h2>
<div id="echart1" style="width: 600px;height:400px;"></div>
</div>
<hr />
<div class="container">
<h2>状态</h2>
<table>
<thead>
<tr>
<th>项目</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>开发者心态</td>
<td class="green">正常</td>
</tr>
<tr>
<td>数据库连接</td>
{% if status["db"] == True %}
<td class="green">正常</td>
{% else %}
<td class="red">连接异常</td>
{% endif %}
</tr>
<tr>
<td>开发者大脑负载</td>
<td class="red">较高</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="../static/menu.js"></script>
<script type="text/javascript">
const apiURL = '/api/modelcount';
datajson = null
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart1'));
//使用fetch API发送GET请求
fetch(apiURL)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 确保返回的是JSON对象
})
.then(data => {
// 确保 data 是一个数组，并且每个元素都有 value 和 name 属性
if (data && Array.isArray(data) && data.every(item => item.value && item.name)) {
myChart.setOption({
title: {
text: '模型调用',
left: 'center',
top: 'center',
textStyle: {
fontSize: '25',
fontWeight: 'bold'
}
},
series: [{
name: '模型调用',
type: 'pie',
radius: '55%',
data: data,
radius: ['30%', '65%'],
label: {
show: true, //开启显示
fontSize: '16',
formatter: '{b}:{c}' + '\n\r' + '({d}%)',
fontWeight: 'bold'
}
}]
});
} else {
console.error('Data received is not in the correct format for ECharts pie chart:', data);
}
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
</script> </script>
</body> </body>