From 8c2a0e12a350000cc4abd7edc4738ffccc02bb0d Mon Sep 17 00:00:00 2001
From: wzj <244142824@qq.com>
Date: Tue, 24 Jun 2025 13:13: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    | 175 +++++++++++++++++++++++++++++++++++++++++++
 templates/index.html |  67 ++++++++++++-----
 2 files changed, 225 insertions(+), 17 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index f7d7213..ce84b08 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -240,4 +240,179 @@ input:checked + .slider {
 
 input:checked + .slider:before {
     transform: translateX(24px);
+}
+
+/* 在现有CSS文件末尾添加以下内容 */
+
+/* 首页专用样式 */
+.dashboard {
+    display: flex;
+    justify-content: space-around;
+    gap: 20px;
+    margin: 30px 0;
+}
+
+.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;
+}
+
+.dashboard-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.dashboard-card h3 {
+    margin-top: 0;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.stat {
+    font-size: 32px;
+    font-weight: 600;
+    margin: 10px 0 0;
+}
+
+.proxy-info {
+    background-color: #f8f9fa;
+    border-radius: 10px;
+    padding: 25px;
+    margin: 30px 0;
+    border-left: 4px solid #4285f4;
+}
+
+.proxy-info h2 {
+    margin-top: 0;
+    color: #2c3e50;
+}
+
+.proxy-info p {
+    margin: 15px 0;
+    line-height: 1.6;
+}
+
+.proxy-info code {
+    background-color: #e9ecef;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: monospace;
+    color: #d63384;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .dashboard {
+        flex-direction: column;
+    }
+
+    .dashboard-card {
+        margin-bottom: 15px;
+    }
+}
+
+/* 添加以下新样式 */
+
+.home-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.home-header .subtitle {
+    color: #6c757d;
+    font-size: 18px;
+    margin-top: 10px;
+}
+
+.card-icon {
+    font-size: 40px;
+    margin-bottom: 15px;
+}
+
+.card-desc {
+    font-size: 14px;
+    opacity: 0.9;
+    margin-top: 5px;
+}
+
+.info-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.step {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+}
+
+.step-number {
+    background-color: #4285f4;
+    color: white;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.quick-actions {
+    display: flex;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.action-card {
+    flex: 1;
+    background-color: white;
+    border-radius: 10px;
+    padding: 25px;
+    text-align: center;
+    text-decoration: none;
+    color: #333;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.action-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.action-icon {
+    font-size: 36px;
+    margin-bottom: 15px;
+}
+
+.action-card h3 {
+    margin: 0 0 10px;
+    color: #2c3e50;
+}
+
+.action-card p {
+    margin: 0;
+    color: #6c757d;
+    font-size: 14px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .quick-actions {
+        flex-direction: column;
+    }
+
+    .step {
+        flex-direction: column;
+        gap: 5px;
+    }
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 7bd2c3e..ffa4f7d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,28 +1,61 @@
-<!-- templates/index.html -->
 {% extends "base.html" %}
 
 {% block title %}Squid代理用户管理系统{% endblock %}
 
 {% block content %}
+<div class="home-header">
     <h1>Squid代理用户管理系统</h1>
+    <p class="subtitle">高效、安全的代理服务管理平台</p>
+</div>
 
-    <div class="dashboard">
-        <div class="dashboard-card">
-            <h3>用户数量</h3>
-            <p class="stat">{{ user_count }}</p>
-        </div>
-
-        <div class="dashboard-card">
-            <h3>代理地址</h3>
-            <p class="stat">{{ proxy_address }}:{{ proxy_port }}</p>
-        </div>
+<div class="dashboard">
+    <div class="dashboard-card">
+        <div class="card-icon">👥</div>
+        <h3>用户数量</h3>
+        <p class="stat">{{ user_count }}</p>
+        <p class="card-desc">当前活跃用户总数</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">
+        <div class="card-icon">🔌</div>
+        <h3>代理地址</h3>
+        <p class="stat">{{ proxy_address }}:{{ proxy_port }}</p>
+        <p class="card-desc">服务器连接信息</p>
     </div>
+</div>
+
+<div class="proxy-info">
+    <h2><i class="icon">📋</i> 代理使用说明</h2>
+    <div class="info-steps">
+        <div class="step">
+            <span class="step-number">1</span>
+            <p>在浏览器或系统设置中配置代理服务器</p>
+        </div>
+        <div class="step">
+            <span class="step-number">2</span>
+            <p>地址: <code>{{ proxy_address }}</code> 端口: <code>{{ proxy_port }}</code></p>
+        </div>
+        <div class="step">
+            <span class="step-number">3</span>
+            <p>使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
+        </div>
+        <div class="step">
+            <span class="step-number">4</span>
+            <p>或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
+        </div>
+    </div>
+</div>
+
+<div class="quick-actions">
+    <a href="{{ url_for('clients') }}" class="action-card">
+        <div class="action-icon">👤</div>
+        <h3>用户管理</h3>
+        <p>添加、编辑或删除用户</p>
+    </a>
+    <a href="{{ url_for('settings') }}" class="action-card">
+        <div class="action-icon">⚙️</div>
+        <h3>系统设置</h3>
+        <p>配置代理参数</p>
+    </a>
+</div>
 {% endblock %}
\ No newline at end of file