wzj/squid_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

增加新功能

Browse Source
This commit is contained in:
wzj 2025-06-24 13:09:56 +08:00
parent cd7add2377
commit 3707bcaf34
5 changed files with 165 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/styles.css
View File

@ -1,4 +1,40 @@
/*s tyle.css */
/* 导航栏样式 */
.main-nav {
display: flex;
background-color: #2c3e50;
border-radius: 8px;
padding: 0 20px;
margin-bottom: 30px;
}
.nav-link {
color: white;
text-decoration: none;
padding: 15px 20px;
transition: background-color 0.3s;
}
.nav-link:hover {
background-color: #34495e;
}
.nav-link.active {
background-color: #4285f4;
font-weight: bold;
}
.nav-logout {
margin-left: auto;
align-self: center;
padding: 8px 16px;
}
/* 内容区域 */
.content {
min-height: 60vh;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
max-width: 900px;

45
templates/base.html Normal file
View File

@ -0,0 +1,45 @@
<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Squid代理用户管理系统{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<!-- 统一的导航栏 -->
<nav class="main-nav">
<a href="{{ url_for('index') }}" class="nav-link {% if request.endpoint == 'index' %}active{% endif %}">首页</a>
<a href="{{ url_for('clients') }}" class="nav-link {% if request.endpoint == 'clients' %}active{% endif %}">用户管理</a>
<a href="{{ url_for('settings') }}" class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}">系统设置</a>
<button id="logoutBtn" class="btn-danger nav-logout">退出系统</button>
</nav>
<!-- 内容区块 -->
<div class="content">
{% block content %}{% endblock %}
</div>
<!-- 统一的页脚 -->
<footer>
由 Flask 重构 - 基于原项目 <a href="https://github.com/ckazi" target="_blank">ckazi</a>
</footer>
</div>
<!-- 统一的JavaScript -->
<script>
// 退出系统功能
document.getElementById('logoutBtn')?.addEventListener('click', function() {
if(confirm('确定要退出系统吗？')) {
fetch('/logout').then(() => {
window.location.href = '/';
});
}
});
</script>
<!-- 子模板可以添加自己的JavaScript -->
{% block scripts %}{% endblock %}
</body>
</html>

26
templates/clients.html
View File

@ -1,19 +1,13 @@
<!-- clients.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理 - Squid代理用户管理系统</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<!-- templates/clients.html -->
{% extends "base.html" %}
{% block title %}用户管理 - Squid代理用户管理系统{% endblock %}
{% block content %}
<h1>用户管理</h1>
<div class="header-actions">
<button id="createUserBtn" class="btn-primary">+ 添加新用户</button>
<a href="{{ url_for('index') }}" class="btn-primary">返回首页</a>
<button id="logoutBtn" class="btn-danger">退出系统</button>
</div>
<table>
@ -39,12 +33,9 @@
</tr>
{% endfor %}
</table>
<footer>
由 Flask 重构 - 基于原项目 <a href="https://github.com/ckazi" target="_blank">ckazi</a>
</footer>
</div>
<!-- 编辑用户模态框 -->
<div id="editModal" class="modal">
<div class="modal-content">
@ -82,7 +73,9 @@
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// 切换用户状态
@ -189,5 +182,4 @@
}
});
</script>
</body>
</html>
{% endblock %}

40
templates/index.html
View File

@ -1,13 +1,9 @@
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Squid代理用户管理系统</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<!-- templates/index.html -->
{% extends "base.html" %}
{% block title %}Squid代理用户管理系统{% endblock %}
{% block content %}
<h1>Squid代理用户管理系统</h1>
<div class="dashboard">
@ -29,26 +25,4 @@
<p>3. 使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
<p>4. 或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
</div>
<div class="navigation">
<a href="{{ url_for('clients') }}" class="btn-primary">用户管理</a>
<a href="{{ url_for('settings') }}" class="btn-primary">系统设置</a>
<button id="logoutBtn" class="btn-danger">退出系统</button>
</div>
<footer>
由 Flask 重构 - 基于原项目 <a href="https://github.com/ckazi" target="_blank">ckazi</a>
</footer>
</div>
<script>
document.getElementById('logoutBtn').addEventListener('click', function() {
if(confirm('确定要退出系统吗？')) {
fetch('/logout').then(() => {
window.location.href = '/';
});
}
});
</script>
</body>
</html>
{% endblock %}

35
templates/settings.html
View File

@ -1,19 +1,10 @@
<!-- settings.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>系统设置 - Squid代理用户管理系统</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<h1>系统设置</h1>
<!-- templates/settings.html -->
{% extends "base.html" %}
<div class="header-actions">
<a href="{{ url_for('index') }}" class="btn-primary">返回首页</a>
<button id="logoutBtn" class="btn-danger">退出系统</button>
</div>
{% block title %}系统设置 - Squid代理用户管理系统{% endblock %}
{% block content %}
<h1>系统设置</h1>
<form method="post" action="{{ url_for('update_settings') }}" class="settings-form">
<div class="form-group">
@ -39,16 +30,4 @@
<a href="{{ url_for('index') }}" class="btn-danger">取消</a>
</div>
</form>
</div>
<script>
document.getElementById('logoutBtn').addEventListener('click', function() {
if(confirm('确定要退出系统吗？')) {
fetch('/logout').then(() => {
window.location.href = '/';
});
}
});
</script>
</body>
</html>
{% endblock %}