feat: MeshSafe 文件摆渡安全卫士 v1.0 初始提交
核心功能: - 6 层检测管线: L0 结构分析 → L1 ClamAV → L2 文档深度检测 → L3 关键词匹配 → L4 YARA → L5 PE/二进制 - FastAPI + PostgreSQL + Redis + Docker Compose 架构 - 客户端 HMAC-SHA256 签名鉴权 + 限流 + 幂等性 - 控制台 UI (登录/Dashboard/诊断中心/策略管理/任务列表/测试中心/产品介绍页) - 三层诊断定时器 (error_scan 30s / db_aggregate 30s / container_check 5min) 并发与稳定性修复: - 诊断定时器 Redis 时间槽位锁 (多 worker 同一槽位只有一个执行) - JSONL 存储 fcntl 跨进程排他锁 + 容错解码 + 原子重写 - 移除 SQLite fallback, 统一 PostgreSQL - API_CLIENTS 脱敏为环境变量, .env 已 .gitignore
This commit is contained in:
278
app/templates/login.html
Normal file
278
app/templates/login.html
Normal file
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="/static/logo.png">
|
||||
<title>MeshSafe · 文件摆渡安全卫士</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* ========= 左栏：品牌区 ========= */
|
||||
.brand-side {
|
||||
flex: 1.25;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #0c4a6e 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 72px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.brand-side::before {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
|
||||
}
|
||||
.brand-side::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(56,189,248,.15) 0%, transparent 65%);
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
|
||||
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
|
||||
}
|
||||
|
||||
.brand-content { position: relative; z-index: 1; width: 100%; max-width: 620px; }
|
||||
|
||||
.brand-logo {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
.brand-logo img { height: 42px; width: 42px; border-radius: 9px; }
|
||||
.brand-logo .brand-name {
|
||||
font-size: 27px; font-weight: 700; color: white; letter-spacing: .5px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.brand-logo .brand-sub {
|
||||
font-size: 12.5px; color: rgba(148,163,184,.85); letter-spacing: 1.5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* 主标语 — 一行 */
|
||||
.tagline-cn {
|
||||
font-size: 30px; font-weight: 700; color: white;
|
||||
line-height: 1.4; margin-bottom: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tagline-cn .highlight {
|
||||
background: linear-gradient(90deg, #38bdf8, #818cf8);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.tagline-en {
|
||||
font-size: 13.5px; color: rgba(148,163,184,.75); letter-spacing: .3px;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
/* 能力标签 — 横向一行 */
|
||||
.cap-row {
|
||||
display: flex; flex-wrap: nowrap; gap: 8px;
|
||||
}
|
||||
.cap {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 8px 13px;
|
||||
background: rgba(56,189,248,.08);
|
||||
border: 1px solid rgba(56,189,248,.22);
|
||||
border-radius: 100px;
|
||||
font-size: 12.5px; color: rgba(226,232,240,.92);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all .2s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cap:hover {
|
||||
background: rgba(56,189,248,.15);
|
||||
border-color: rgba(56,189,248,.4);
|
||||
}
|
||||
.cap .dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: #38bdf8; flex-shrink: 0;
|
||||
box-shadow: 0 0 8px rgba(56,189,248,.8);
|
||||
}
|
||||
.cap.secure .dot { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.8); }
|
||||
.cap.secure:hover { background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.38); }
|
||||
|
||||
/* 引擎列表 */
|
||||
.engine-line {
|
||||
margin-top: 28px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(148,163,184,.15);
|
||||
}
|
||||
.engine-line .el-label {
|
||||
font-size: 11.5px; color: rgba(148,163,184,.6);
|
||||
letter-spacing: 2px; margin-bottom: 12px;
|
||||
}
|
||||
.engine-line .el-items {
|
||||
display: flex; flex-wrap: wrap; gap: 8px;
|
||||
}
|
||||
.engine-line .el {
|
||||
font-size: 12px; color: rgba(203,213,225,.75);
|
||||
padding: 5px 11px;
|
||||
background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* ========= 右栏：登录卡片 ========= */
|
||||
.login-side {
|
||||
flex: 1;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 60px;
|
||||
}
|
||||
.login-card { width: 380px; }
|
||||
.login-card .hello {
|
||||
font-size: 15px; color: #64748b; margin-bottom: 8px;
|
||||
}
|
||||
.login-card .title {
|
||||
font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 36px;
|
||||
}
|
||||
|
||||
label { display: block; font-size: 13px; color: #334155; margin-bottom: 8px; font-weight: 500; }
|
||||
.input-wrap { position: relative; margin-bottom: 20px; }
|
||||
.input-wrap input {
|
||||
width: 100%; padding: 12px 14px 12px 40px;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 10px;
|
||||
font-size: 14px; background: #f8fafc;
|
||||
transition: all .2s;
|
||||
}
|
||||
.input-wrap input:focus {
|
||||
border-color: #3b82f6; background: white;
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,.12); outline: none;
|
||||
}
|
||||
.input-wrap .input-icon {
|
||||
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
|
||||
color: #94a3b8; font-size: 16px;
|
||||
}
|
||||
|
||||
button.login-btn {
|
||||
width: 100%; padding: 13px;
|
||||
background: linear-gradient(135deg, #1e3a5f, #3b82f6);
|
||||
color: white; border: none; border-radius: 10px;
|
||||
font-size: 15px; font-weight: 600; cursor: pointer;
|
||||
transition: all .2s;
|
||||
margin-top: 8px;
|
||||
}
|
||||
button.login-btn:hover {
|
||||
background: linear-gradient(135deg, #244773, #2563eb);
|
||||
box-shadow: 0 8px 24px rgba(59,130,246,.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
button.login-btn:active { transform: translateY(0); }
|
||||
|
||||
.error {
|
||||
background: #fef2f2; color: #dc2626;
|
||||
padding: 12px 14px; border-radius: 10px;
|
||||
font-size: 13px; margin-bottom: 20px;
|
||||
border: 1px solid #fecaca;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px; text-align: center;
|
||||
color: #94a3b8; font-size: 12px;
|
||||
}
|
||||
.footer .divider {
|
||||
display: inline-block; width: 40px; height: 1px; background: #e2e8f0;
|
||||
vertical-align: middle; margin: 0 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.tagline-cn { font-size: 24px; white-space: normal; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
body { flex-direction: column; }
|
||||
.brand-side { padding: 48px 32px; flex: none; min-height: 320px; }
|
||||
.engine-line { display: none; }
|
||||
.login-side { padding: 32px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ========== 左栏：品牌区 ========== -->
|
||||
<div class="brand-side">
|
||||
<div class="brand-content">
|
||||
<div class="brand-logo">
|
||||
<img src="/static/logo.png" alt="MeshSafe">
|
||||
<div>
|
||||
<div class="brand-name">MeshSafe</div>
|
||||
<div class="brand-sub">文件摆渡安全卫士</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tagline-cn">
|
||||
多层检测，<span class="highlight">双向管控</span>，文件摆渡更安心
|
||||
</div>
|
||||
<div class="tagline-en">Multi-layer inspection · Bidirectional control · Safer file exchange</div>
|
||||
|
||||
<div class="cap-row">
|
||||
<div class="cap"><span class="dot"></span>6 层引擎交叉检测</div>
|
||||
<div class="cap secure"><span class="dot"></span>故障默认拦截</div>
|
||||
<div class="cap"><span class="dot"></span>零容忍规则优先响应</div>
|
||||
<div class="cap secure"><span class="dot"></span>全链路审计追溯</div>
|
||||
</div>
|
||||
|
||||
<div class="engine-line">
|
||||
<div class="el-label">DETECTION ENGINES</div>
|
||||
<div class="el-items">
|
||||
<div class="el">文件结构分析</div>
|
||||
<div class="el">ClamAV 病毒库</div>
|
||||
<div class="el">文档深度检测</div>
|
||||
<div class="el">关键词匹配</div>
|
||||
<div class="el">YARA 规则匹配</div>
|
||||
<div class="el">PE/二进制分析</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 右栏：登录卡片 ========== -->
|
||||
<div class="login-side">
|
||||
<div class="login-card">
|
||||
<div class="hello">欢迎回来</div>
|
||||
<div class="title">登录 MeshSafe</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="error">
|
||||
<span>⚠️</span>
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/console/login">
|
||||
<div class="input-wrap">
|
||||
<span class="input-icon">👤</span>
|
||||
<input type="text" name="username" placeholder="请输入用户名" autocomplete="username" autofocus required>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<span class="input-icon">🔒</span>
|
||||
<input type="password" name="password" placeholder="请输入密码" autocomplete="current-password" required>
|
||||
</div>
|
||||
<button type="submit" class="login-btn">登 录</button>
|
||||
</form>
|
||||
|
||||
<div class="footer">
|
||||
<span>© MeshSafe</span>
|
||||
<span class="divider"></span>
|
||||
<span>文件摆渡 · 内外网隔离</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user