mirror of
https://github.com/Kakune55/PyGetGPT.git
synced 2025-05-06 18:29:24 +08:00
为后台管理添加菜单栏
This commit is contained in:
parent
8e086129b7
commit
dc9d9d9369
@ -7,7 +7,7 @@ body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-image: url("../static/img/bg_circles.png");
|
||||
background-repeat: repeat;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
#chat-container {
|
||||
width: 80%; /* 使用百分比宽度 */
|
||||
|
||||
52
static/menu.css
Normal file
52
static/menu.css
Normal 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
9
static/menu.js
Normal 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;
|
||||
}
|
||||
@ -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>
|
||||
@ -4,6 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>创建密钥</title>
|
||||
<link rel="stylesheet" type="text/css" href="../static/menu.css">
|
||||
<script src="../static/echarts.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@ -21,6 +23,17 @@
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<h2>创建单个密钥</h2>
|
||||
<form method="post">
|
||||
@ -53,9 +66,9 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<script>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
<script src="../static/menu.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -4,6 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>列出密钥</title>
|
||||
<link rel="stylesheet" type="text/css" href="../static/menu.css">
|
||||
<script src="../static/echarts.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@ -37,6 +39,17 @@
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<h2>列出密钥</h2>
|
||||
<table>
|
||||
@ -58,11 +71,11 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr/>
|
||||
<hr />
|
||||
|
||||
<script>
|
||||
// 在这里可以添加一些交互逻辑，例如点击某个状态显示更多信息
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script src="../static/menu.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -4,6 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>列出日志</title>
|
||||
<link rel="stylesheet" type="text/css" href="../static/menu.css">
|
||||
<script src="../static/echarts.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@ -37,6 +39,17 @@
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<h2>列出日志</h2>
|
||||
<table>
|
||||
@ -62,11 +75,10 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr/>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 在这里可以添加一些交互逻辑，例如点击某个状态显示更多信息
|
||||
</script>
|
||||
<script src="../static/menu.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -4,6 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>查询密钥</title>
|
||||
<link rel="stylesheet" type="text/css" href="../static/menu.css">
|
||||
<script src="../static/echarts.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@ -21,6 +23,17 @@
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<h2>查询密钥</h2>
|
||||
<form method="post">
|
||||
@ -40,9 +53,9 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<script>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
<script src="../static/menu.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -4,6 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>后台管理</title>
|
||||
<link rel="stylesheet" type="text/css" href="../static/menu.css">
|
||||
<script src="../static/echarts.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@ -42,18 +44,29 @@
|
||||
color: red;
|
||||
}
|
||||
|
||||
.nodecoration{
|
||||
.nodecoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<h2>概况</h2>
|
||||
{% include 'Echarts.html' %}
|
||||
<div id="echart1" style="width: 600px;height:400px;"></div>
|
||||
</div>
|
||||
<hr/>
|
||||
<hr />
|
||||
<div class="container">
|
||||
<h2>状态</h2>
|
||||
<table>
|
||||
@ -83,37 +96,56 @@
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user