static: 迁移 mgmt 前端到 static/public 并移除静态列表

将 mgmt Jinja2 模板原封不动迁移为纯静态 HTML/CSS,
删除用户列表与模块列表,改为静态提示文字。
This commit is contained in:
qing committed 2026-08-04 19:23:57 +08:00
1 parent 3460a157d0
commit c8812dd27c
12 files changed
+565

No files matched your search

View File
Whitespace-only changes.
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="data:;base64,=">
</head>
<body>
log
</body>
</html>
+35
View File
@@ -0,0 +1,35 @@
.top-bar-con {
width: 230px;
display: flex;
justify-content: space-between;
}
.newBtn,
.flushBtn,
.removeBtn {
width: 84px;
height: 42px;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
}
.newBtn {
background-color: #5cff007d;
}
.flushBtn {
background-color: #5757577d;
}
.removeBtn {
background-color: #ff00007d;
color: #000000b8;
}
td {
width: 180px;
text-align: center;
font-size: 20px;
}
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="module.css">
</head>
<body>
<div class="top-bar-con">
<button class="newBtn">新建</button>
<button class="flushBtn">刷新</button>
</div>
<p>模块列表需 mgmt Flask 后端 API 提供,静态页面不展示。</p>
</body>
</html>
+74
View File
@@ -0,0 +1,74 @@
.newBtn,
.flushBtn,
.stopBtn {
width: 84px;
height: 42px;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
}
.newBtn {
background-color: #5cff007d;
}
.flushBtn {
background-color: #5757577d;
margin-left: 60px;
}
.stopBtn {
background-color: #ff00007d;
}
.text,
.title {
font-size: 20px;
}
td,
th {
width: 180px;
text-align: center;
}
#inProgressText {
font-size: 20px;
margin-top: 5px;
letter-spacing: 2px;
}
/* modal window style */
.modal-con {
width: 100%;
height: 100%;
background-color: rgba(68, 94, 65, 0.77);
position: absolute;
left: 0px;
top: 0px;
display: none;
justify-content: center;
z-index: 1;
}
.modal-con .window {
width: 200px;
height: 120px;
background-color: #5cff007d;
padding: 0px 10px;
}
.modal-con .window .top-bar {
display: flex;
justify-content: end;
}
.modal-con .window .top-bar .close-btn {
cursor: pointer;
}
.modal-con .window .create-btn,
.modal-con .window .input .input-area {
margin-top: 5px;
}
+75
View File
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="process.css">
</head>
<body>
<!-- stop, new flush -->
<button class="newBtn" onclick="newBtn()">新建</button>
<button class="flushBtn" onclick="flushBtn()">刷新</button>
<table border="1">
<thead>
<tr>
<th class="title">PID</th>
<th class="title">状态</th>
<th class="title">命令</th>
<th class="title">操作</th>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
<div id="inProgressText"></div>
<div class="modal-con" id="modal-con">
<div class="window">
<div class="top-bar">
<div class="close-btn" onclick="closeModal()">X</div>
</div>
<div class="input">
<div class="prompt">输入模块名:</div>
<input id="input-area" class="input-area" type="text">
</div>
<button class="create-btn" onclick="createProcess()">创建</button>
</div>
</div>
<script>
function newBtn() {
const modal = document.getElementById("modal-con")
modal.style.display = "flex"
}
function createProcess() {
const moduleName = document.getElementById("input-area").value
alert("注意:这是静态页面 - 创建进程需要后端 API 支持,请通过 mgmt Flask 后端访问");
}
function flushBtn() {
window.location.reload()
}
function stopBtn(pid) {
if (!confirm("确认停止该服务?")) {
return
}
alert("注意:这是静态页面 - 停止进程需要后端 API 支持,请通过 mgmt Flask 后端访问");
}
function closeModal() {
const modal = document.getElementById("modal-con")
const input = document.getElementById("input-area")
input.value = ""
modal.style.display = "none"
}
</script>
</body>
</html>
+41
View File
@@ -0,0 +1,41 @@
.top-bar-con {
width: 230px;
display: flex;
justify-content: space-between;
}
td {
width: 180px;
text-align: center;
font-size: 20px;
}
.addUserBtn,
.flushBtn,
.changePasswdBtn,
.deleteUserBtn {
width: 84px;
height: 42px;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
}
.addUserBtn {
background-color: #5cff007d;
}
.flushBtn {
background-color: #5757577d;
}
.changePasswdBtn {
background-color: #e6db407d;
color: #fb0202b0;
}
.deleteUserBtn {
background-color: #ff00007d;
color: #000000b8;
}
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="user.css">
</head>
<body>
<div class="top-bar-con">
<button class="addUserBtn" onclick="addUser()">添加用户</button>
<button class="flushBtn" onclick="flush()">刷新</button>
</div>
<p>用户列表需 mgmt Flask 后端 API 提供,静态页面不展示。</p>
<script>
function addUser() {
alert("注意:这是静态页面 - 添加用户需要后端 API 支持,请通过 mgmt Flask 后端访问");
}
function changePasswd(id) {
alert("注意:这是静态页面 - 修改密码需要后端 API 支持,请通过 mgmt Flask 后端访问");
}
function deleteUser(id) {
alert("注意:这是静态页面 - 删除用户需要后端 API 支持,请通过 mgmt Flask 后端访问");
}
function flush() {
window.location.reload()
}
</script>
</body>
</html>
+39
View File
@@ -0,0 +1,39 @@
body {
display: flex;
justify-content: center;
}
.main {
background-color: rgb(233, 233, 233);
padding: 20px 10px;
}
.main .title {
font-weight: bold;
}
.main .name-con,
.main .passwd-con {
display: flex;
justify-content: center;
}
.main .name-con {
margin-top: 20px;
}
.main .passwd-con {
margin-top: 10px;
}
.main .name-con .user-name-text,
.main .passwd-con .user-passwd-text {
width: 100px;
}
.main .login-con {
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px;
}
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pmc management</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="main">
<div class="title">Welcome to pmc management system</div>
<div class="name-con">
<div class="user-name-text">Name: </div>
<input class="user-name-input" id="user-name" type="text">
</div>
<div class="passwd-con">
<div class="user-passwd-text">Password: </div>
<input class="user-passwd-input" id="user-passwd" type="password">
</div>
<div class="login-con">
<button onclick="login()">login</button>
</div>
</div>
<script>
function login() {
const name = document.getElementById("user-name").value
const passwd = document.getElementById("user-passwd").value
const request = new XMLHttpRequest()
const REQUEST_URL = "/api/login"
// if user not input any information
if (name === "" || passwd === "") {
alert("please input name or passwd")
return
}
// request api
let requestData = new URLSearchParams()
requestData.append("user-name", name)
requestData.append("user-passwd", passwd)
request.open("post", REQUEST_URL, true)
request.send(requestData)
request.onload = () => {
if (request.status === 401) {
alert(request.responseText)
return
}
if (request.status === 404) {
alert(request.responseText)
return
}
if (request.status === 500) {
alert("服务端错误")
return
}
if (request.status === 200 && request.readyState === 4) {
const token = JSON.parse(request.responseText).token
let date = new Date()
date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000))
const UTCTime = date.toUTCString()
document.cookie = `token=${token}; path=/; expires=${UTCTime}`
window.location = JSON.parse(request.responseText).redirect;
return
} else {
alert(`意外错误 (${request.status})`)
return
}
}
}
document.addEventListener("keydown", (e) => {
if (e.key != "Enter") {
return
}
login()
})
</script>
</body>
</html>
+54
View File
@@ -0,0 +1,54 @@
:root {
--listMargin: 15%;
}
* {
margin: 0px;
padding: 0px;
}
.top-con {
display: flex;
}
.top-con >*{
margin-left: 25px;
font-size: 20px;
}
.top-con div button {
font-size: 16px;
}
.main {
width: 100%;
height: 600px;
display: flex;
}
.feature-list {
width: 150px;
height: 100%;
background-color: #FFFFCC;
padding: 0px 10px 0px 10px;
overflow-y: scroll;
}
.feature-list .item {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #0066cc;
color: #fff;
font-size: 18px;
font-weight: bold;
margin-top: var(--listMargin);
cursor: pointer;
}
.pages {
width: 100%;
height: 100%;
}
+87
View File
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>management page</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="mgmt.css">
<script>
window.onload = () => {
const featureList = [
{
name: "进程",
url: "features/process.html"
},
{
name: "模块",
url: "features/module.html"
},
// {
// name: "日志",
// url: "features/log.html"
// },
{
name: "用户",
url: "features/user.html"
}
]
const featureListEle = document.getElementById("feature-list")
for (let i = 0; i < featureList.length; i++) {
// get name and url
const name = featureList[i].name
const url = featureList[i].url
// Create a item
let listItemEle = document.createElement("div")
listItemEle.setAttribute("class", "item")
listItemEle.innerText = name
listItemEle.setAttribute("onclick", `switchPage('${url}')`)
// append element into feature list
featureListEle.append(listItemEle)
}
// set default page in iframe
const DEFAULT_PAGE = "<!DOCTYPE html><h1>请在左侧选择功能</h1>"
document.getElementById("page").contentDocument.write(DEFAULT_PAGE)
}
</script>
</head>
<body>
<div class="top-con">
<div id="current-user">当前用户: 未登录</div>
<div id="current-role">当前角色: 未知</div>
<div class="button-con">
<button onclick="logout()">退出登陆</button>
</div>
</div>
<div class="main">
<div class="feature-list" id="feature-list"></div>
<div class="pages">
<iframe id="page" src="" frameborder="1" width="100%" height="100%"></iframe>
</div>
</div>
<script>
// change the iframe's url
function switchPage(url) {
const page = document.getElementById("page")
page.setAttribute("src", url)
}
function logout() {
if (!confirm("确认退出?")) {
return
}
document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
window.location = "index.html"
}
</script>
</body>
</html>