From 3707bcaf348e8b26aa693b957dbb8ca9c1e29f1c Mon Sep 17 00:00:00 2001
From: wzj <244142824@qq.com>
Date: Tue, 24 Jun 2025 13:09:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/styles.css       | 36 +++++++++++++++++++
 templates/base.html     | 45 ++++++++++++++++++++++++
 templates/clients.html  | 78 ++++++++++++++++++-----------------------
 templates/index.html    | 68 +++++++++++------------------------
 templates/settings.html | 77 +++++++++++++++-------------------------
 5 files changed, 165 insertions(+), 139 deletions(-)
 create mode 100644 templates/base.html
diff --git a/static/styles.css b/static/styles.css
index a7dd7e7..f7d7213 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -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;
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..e98bb80
--- /dev/null
+++ b/templates/base.html
@@ -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>
\ No newline at end of file
diff --git a/templates/clients.html b/templates/clients.html
index 240980a..eb3f312 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -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>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index ebf705c..7bd2c3e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>
\ No newline at end of file
+    <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 %}
\ No newline at end of file
diff --git a/templates/settings.html b/templates/settings.html
index 8a6a002..5af6aff 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -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>
\ No newline at end of file
+        <div class="form-actions">
+            <button type="submit" class="btn-success">保存设置</button>
+            <a href="{{ url_for('index') }}" class="btn-danger">取消</a>
+        </div>
+    </form>
+{% endblock %}
\ No newline at end of file
