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:13:56 +08:00
parent 3707bcaf34
commit 8c2a0e12a3
2 changed files with 225 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
static/styles.css
View File

@ -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;
}
}

67
templates/index.html
View File

@ -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 %}