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>

17
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,6 +23,17 @@
</head> </head>
<body> <body>
<div id="global-blur"></div>
<div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<a href="/admin" class="nodecoration">仪表盘</a>
<a href="/admin/list" class="nodecoration">列出所有Key</a>
<a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<a href="/admin/createkey" class="nodecoration">创建密钥</a>
<a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<!-- 添加更多菜单项 -->
</div>
<div id="main">
<div class="container"> <div class="container">
<h2>创建单个密钥</h2> <h2>创建单个密钥</h2>
<form method="post"> <form method="post">
@ -53,9 +66,9 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<script> </div>
</script> <script src="../static/menu.js"></script>
</body> </body>
</html> </html>

21
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,6 +39,17 @@
</head> </head>
<body> <body>
<div id="global-blur"></div>
<div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<a href="/admin" class="nodecoration">仪表盘</a>
<a href="/admin/list" class="nodecoration">列出所有Key</a>
<a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<a href="/admin/createkey" class="nodecoration">创建密钥</a>
<a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<!-- 添加更多菜单项 -->
</div>
<div id="main">
<div class="container"> <div class="container">
<h2>列出密钥</h2> <h2>列出密钥</h2>
<table> <table>
@ -58,11 +71,11 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<hr/> <hr />
<script> </div>
// 在这里可以添加一些交互逻辑，例如点击某个状态显示更多信息
</script> <script src="../static/menu.js"></script>
</body> </body>
</html> </html>

20
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,6 +39,17 @@
</head> </head>
<body> <body>
<div id="global-blur"></div>
<div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<a href="/admin" class="nodecoration">仪表盘</a>
<a href="/admin/list" class="nodecoration">列出所有Key</a>
<a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<a href="/admin/createkey" class="nodecoration">创建密钥</a>
<a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<!-- 添加更多菜单项 -->
</div>
<div id="main">
<div class="container"> <div class="container">
<h2>列出日志</h2> <h2>列出日志</h2>
<table> <table>
@ -62,11 +75,10 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<hr/> <hr />
</div>
<script> <script src="../static/menu.js"></script>
// 在这里可以添加一些交互逻辑，例如点击某个状态显示更多信息
</script>
</body> </body>
</html> </html>

17
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,6 +23,17 @@
</head> </head>
<body> <body>
<div id="global-blur"></div>
<div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<a href="/admin" class="nodecoration">仪表盘</a>
<a href="/admin/list" class="nodecoration">列出所有Key</a>
<a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<a href="/admin/createkey" class="nodecoration">创建密钥</a>
<a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<!-- 添加更多菜单项 -->
</div>
<div id="main">
<div class="container"> <div class="container">
<h2>查询密钥</h2> <h2>查询密钥</h2>
<form method="post"> <form method="post">
@ -40,9 +53,9 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<script> </div>
</script> <script src="../static/menu.js"></script>
</body> </body>
</html> </html>

96
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,18 +44,29 @@
color: red; color: red;
} }
.nodecoration{ .nodecoration {
text-decoration: none; text-decoration: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="global-blur"></div>
<div id="sidebar" onmouseover="openNav()" onmouseout="closeNav()">
<a href="/admin" class="nodecoration">仪表盘</a>
<a href="/admin/list" class="nodecoration">列出所有Key</a>
<a href="/admin/lookupkey" class="nodecoration">查询密钥</a>
<a href="/admin/createkey" class="nodecoration">创建密钥</a>
<a href="/admin/log?show=500" class="nodecoration">查看日志</a>
<!-- 添加更多菜单项 -->
</div>
<div id="main">
<div class="container"> <div class="container">
<h2>概况</h2> <h2>概况</h2>
{% include 'Echarts.html' %} <div id="echart1" style="width: 600px;height:400px;"></div>
</div> </div>
<hr/> <hr />
<div class="container"> <div class="container">
<h2>状态</h2> <h2>状态</h2>
<table> <table>
@ -83,37 +96,56 @@
</tbody> </tbody>
</table> </table>
</div> </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> <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>