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>

78
templates/clients.html
View File

@ -1,50 +1,41 @@
<!-- 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">
<h1>用户管理</h1>
<!-- templates/clients.html -->
{% extends "base.html" %}
<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>
{% block title %}用户管理 - Squid代理用户管理系统{% endblock %}
<table>
<tr>
<th>用户名</th>
<th>状态</th>
<th>操作</th>
</tr>
{% for user in users %}
<tr>
<td>{{ user.name }}</td>
<td>{{ "启用" if user.is_active else "禁用" }}</td>
<td>
<div class="actions">
<label class="switch">
<input type="checkbox" {% if user.is_active %}checked{% endif %} data-username="{{ user.name }}">
<span class="slider"></span>
</label>
<button class="btn-primary edit-btn">编辑</button>
<button class="btn-danger delete-btn">删除</button>
</div>
</td>
</tr>
{% endfor %}
</table>
{% block content %}
<h1>用户管理</h1>
<div class="header-actions">
<button id="createUserBtn" class="btn-primary">+ 添加新用户</button>
</div>
<table>
<tr>
<th>用户名</th>
<th>状态</th>
<th>操作</th>
</tr>
{% for user in users %}
<tr>
<td>{{ user.name }}</td>
<td>{{ "启用" if user.is_active else "禁用" }}</td>
<td>
<div class="actions">
<label class="switch">
<input type="checkbox" {% if user.is_active %}checked{% endif %} data-username="{{ user.name }}">
<span class="slider"></span>
</label>
<button class="btn-primary edit-btn">编辑</button>
<button class="btn-danger delete-btn">删除</button>
</div>
</td>
</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 %}

68
templates/index.html
View File

@ -1,54 +1,28 @@
<!-- 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">
<h1>Squid代理用户管理系统</h1>
<!-- templates/index.html -->
{% extends "base.html" %}
<div class="dashboard">
<div class="dashboard-card">
<h3>用户数量</h3>
<p class="stat">{{ user_count }}</p>
</div>
{% block title %}Squid代理用户管理系统{% endblock %}
<div class="dashboard-card">
<h3>代理地址</h3>
<p class="stat">{{ proxy_address }}:{{ proxy_port }}</p>
</div>
{% block content %}
<h1>Squid代理用户管理系统</h1>
<div class="dashboard">
<div class="dashboard-card">
<h3>用户数量</h3>
<p class="stat">{{ user_count }}</p>
</div>
<div class="proxy-info">
<h2>代理使用说明</h2>
<p>1. 在浏览器或系统设置中配置代理服务器</p>
<p>2. 地址: <code>{{ proxy_address }}</code> 端口: <code>{{ proxy_port }}</code></p>
<p>3. 使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
<p>4. 或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
<div class="dashboard-card">
<h3>代理地址</h3>
<p class="stat">{{ proxy_address }}:{{ proxy_port }}</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>
<div class="proxy-info">
<h2>代理使用说明</h2>
<p>1. 在浏览器或系统设置中配置代理服务器</p>
<p>2. 地址: <code>{{ proxy_address }}</code> 端口: <code>{{ proxy_port }}</code></p>
<p>3. 使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
<p>4. 或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
</div>
{% endblock %}

77
templates/settings.html
View File

@ -1,54 +1,33 @@
<!-- 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>
{% block title %}系统设置 - Squid代理用户管理系统{% endblock %}
{% block content %}
<h1>系统设置</h1>
<form method="post" action="{{ url_for('update_settings') }}" class="settings-form">
<div class="form-group">
<label for="admin_password">管理员密码</label>
<input type="password" id="admin_password" name="admin_password"
placeholder="留空则不修改" value="{{ config.admin_password }}">
</div>
<form method="post" action="{{ url_for('update_settings') }}" class="settings-form">
<div class="form-group">
<label for="admin_password">管理员密码</label>
<input type="password" id="admin_password" name="admin_password"
placeholder="留空则不修改" value="{{ config.admin_password }}">
</div>
<div class="form-group">
<label for="proxy_address">代理服务器地址</label>
<input type="text" id="proxy_address" name="proxy_address"
value="{{ config.proxy_address }}" required>
</div>
<div class="form-group">
<label for="proxy_address">代理服务器地址</label>
<input type="text" id="proxy_address" name="proxy_address"
value="{{ config.proxy_address }}" required>
</div>
<div class="form-group">
<label for="proxy_port">代理服务器端口</label>
<input type="text" id="proxy_port" name="proxy_port"
value="{{ config.proxy_port }}" required>
</div>
<div class="form-group">
<label for="proxy_port">代理服务器端口</label>
<input type="text" id="proxy_port" name="proxy_port"
value="{{ config.proxy_port }}" required>
</div>
<div class="form-actions">
<button type="submit" class="btn-success">保存设置</button>
<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>
<div class="form-actions">
<button type="submit" class="btn-success">保存设置</button>
<a href="{{ url_for('index') }}" class="btn-danger">取消</a>
</div>
</form>
{% endblock %}