feat: 新增原型站轻量登录网关，保护所有静态文件访问
- 新增自定义登录页 login.html - 新增 Node 登录网关 server.js（写死密码 + 签名 Cookie + 统一鉴权） - 未登录访问任意页面自动跳转登录页，登录后回跳原地址 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
+166
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>原型访问登录 - 健康长庆升级</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1677FF;
|
||||
--primary-dark: #0958D9;
|
||||
--text-primary: #1a1a2e;
|
||||
--text-secondary: #5a607f;
|
||||
--border: #e8ecf1;
|
||||
--background: #f0f2f8;
|
||||
--card-bg: #ffffff;
|
||||
--danger: #FF4D4F;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 16px;
|
||||
--shadow-lg: 0 10px 30px rgba(22,119,255,0.15), 0 4px 10px rgba(0,0,0,0.06);
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--background);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif;
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 顶部装饰条 */
|
||||
.top-bar {
|
||||
position: fixed; top: 0; left: 0; right: 0; height: 4px;
|
||||
background: linear-gradient(90deg, #0b3d91, var(--primary), #4facfe);
|
||||
}
|
||||
|
||||
/* 登录卡片 */
|
||||
.login-card {
|
||||
width: 400px; max-width: calc(100vw - 32px);
|
||||
padding: 40px 36px;
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* Logo 区域 */
|
||||
.login-header { text-align: center; margin-bottom: 32px; }
|
||||
.login-header__icon {
|
||||
width: 56px; height: 56px; margin: 0 auto 16px;
|
||||
background: linear-gradient(135deg, #0b3d91 0%, var(--primary) 40%, #4facfe 100%);
|
||||
border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.login-header__icon svg { width: 28px; height: 28px; }
|
||||
.login-header__title { font-size: 20px; font-weight: 700; }
|
||||
.login-header__sub { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
|
||||
|
||||
/* 表单 */
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-group label {
|
||||
display: block; font-size: 13px; font-weight: 600;
|
||||
color: var(--text-secondary); margin-bottom: 8px;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%; height: 46px; padding: 0 14px;
|
||||
border: 1.5px solid var(--border); border-radius: var(--radius-md);
|
||||
font-size: 14px; color: var(--text-primary);
|
||||
background: var(--card-bg);
|
||||
transition: border-color .2s, box-shadow .2s;
|
||||
outline: none;
|
||||
}
|
||||
.form-input:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(22,119,255,0.1);
|
||||
}
|
||||
.form-input::placeholder { color: #bbb; }
|
||||
|
||||
/* 错误提示 */
|
||||
.error-msg {
|
||||
min-height: 22px; margin-bottom: 8px;
|
||||
font-size: 13px; color: var(--danger);
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
|
||||
/* 提交按钮 */
|
||||
.submit-btn {
|
||||
width: 100%; height: 46px; border: none;
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
|
||||
color: #fff; font-size: 15px; font-weight: 600;
|
||||
cursor: pointer; transition: opacity .2s, transform .1s;
|
||||
}
|
||||
.submit-btn:hover { opacity: 0.9; }
|
||||
.submit-btn:active { transform: scale(0.98); }
|
||||
|
||||
/* 底部说明 */
|
||||
.footer-text {
|
||||
text-align: center; margin-top: 24px;
|
||||
font-size: 12px; color: #bbb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar"></div>
|
||||
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="login-header__icon">
|
||||
<!-- 锁图标 -->
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="login-header__title">原型访问登录</div>
|
||||
<div class="login-header__sub">请输入访问密码以浏览原型页面</div>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" method="post" action="/simple-login">
|
||||
<input type="hidden" id="redirectInput" name="redirect" value="/" />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="passwordInput">访问密码</label>
|
||||
<input
|
||||
class="form-input"
|
||||
id="passwordInput"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="请输入访问密码"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="error-msg" id="errorMsg"></div>
|
||||
|
||||
<button class="submit-btn" type="submit">登录访问</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-text">健康长庆升级 · 高保真交互原型</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var redirect = params.get('redirect');
|
||||
var error = params.get('error');
|
||||
|
||||
/* 回跳地址：只允许站内相对路径 */
|
||||
if (redirect && redirect.charAt(0) === '/') {
|
||||
document.getElementById('redirectInput').value = redirect;
|
||||
}
|
||||
|
||||
/* 密码错误提示 */
|
||||
if (error === '1') {
|
||||
document.getElementById('errorMsg').textContent = '密码错误，请重试';
|
||||
document.getElementById('passwordInput').select();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user