增加新功能

app.py

@@ -4,6 +4,7 @@ import os
 import subprocess
 import json
 import uuid
+from math import ceil
 
 app = Flask(__name__)
 app.secret_key = str(uuid.uuid4())
@@ -107,12 +108,27 @@ def index():
                            proxy_address=config['proxy_address'],
                            proxy_port=config['proxy_port'])
 
-
+# 在 clients 路由中增加分页逻辑
 @app.route('/clients')
 @basic_auth_required
 def clients():
+    page = request.args.get('page', 1, type=int)
+    per_page = 5
+
     users = read_squid_file()
-    return render_template('clients.html', users=users)
+    total_pages = ceil(len(users) / per_page)
+
+    start = (page - 1) * per_page
+    end = start + per_page
+    paginated_users = users[start:end]
+
+    return render_template('clients.html',
+                           users=paginated_users,
+                           page=page,
+                           total_pages=total_pages)
+
+
+# 其他代码保持不变...
 
 
 @app.route('/settings')

static/styles.css

@@ -249,18 +249,21 @@ input:checked + .slider:before {
     display: flex;
     justify-content: space-around;
     gap: 20px;
-    margin: 30px 0;
+    margin: 20px 0;
+}
+.home-header h1 {
+    font-size: 24px;
+    margin-bottom: 15px;
 }
-
 .dashboard-card {
     flex: 1;
     background: linear-gradient(135deg, #4285f4, #34a853);
     color: white;
-    padding: 25px;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     text-align: center;
     transition: transform 0.3s, box-shadow 0.3s;
+    padding: 15px;
 }
 
 .dashboard-card:hover {
@@ -275,22 +278,23 @@ input:checked + .slider:before {
 }
 
 .stat {
-    font-size: 32px;
+    font-size: 24px;
+    margin: 5px 0 0;
     font-weight: 600;
-    margin: 10px 0 0;
 }
 
 .proxy-info {
     background-color: #f8f9fa;
     border-radius: 10px;
-    padding: 25px;
+    padding: 15px;
-    margin: 30px 0;
+    margin: 20px 0;
     border-left: 4px solid #4285f4;
 }
 
 .proxy-info h2 {
     margin-top: 0;
     color: #2c3e50;
+    font-size: 18px;
 }
 
 .proxy-info p {
@@ -351,6 +355,7 @@ input:checked + .slider:before {
     display: flex;
     align-items: flex-start;
     gap: 15px;
+    margin-bottom: 10px;
 }
 
 .step-number {
@@ -405,6 +410,49 @@ input:checked + .slider:before {
     font-size: 14px;
 }
 
+/* 设置页按钮样式调整 */
+.settings-form .btn-danger {
+    background-color: #ea4335;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+}
+
+.settings-form .btn-danger:hover {
+    background-color: #d33426;
+}
+
+/* 分页样式 */
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    gap: 5px;
+}
+
+.pagination a, .pagination span {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    text-decoration: none;
+    color: #4285f4;
+    border-radius: 4px;
+}
+
+.pagination a:hover {
+    background-color: #f1f1f1;
+}
+
+.pagination .current {
+    background-color: #4285f4;
+    color: white;
+    border-color: #4285f4;
+}
+
 /* 响应式调整 */
 @media (max-width: 768px) {
     .quick-actions {

templates/clients.html

@@ -33,6 +33,26 @@
         </tr>
         {% endfor %}
     </table>
+
+    <!-- 分页导航 -->
+    <div class="pagination">
+        {% if page > 1 %}
+            <a href="{{ url_for('clients', page=page-1) }}">&laquo; 上一页</a>
+        {% endif %}
+
+        {% for p in range(1, total_pages + 1) %}
+            {% if p == page %}
+                <span class="current">{{ p }}</span>
+            {% else %}
+                <a href="{{ url_for('clients', page=p) }}">{{ p }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {% if page < total_pages %}
+            <a href="{{ url_for('clients', page=page+1) }}">下一页 &raquo;</a>
+        {% endif %}
+    </div>
+
     <!-- 编辑用户模态框 -->
     <div id="editModal" class="modal">
         <div class="modal-content">