做几方面优化
This commit is contained in:
+676
-92
@@ -3,126 +3,614 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>统一认证中心 - 登录</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #3973ff;
|
||||
--primary-dark: #2560a9;
|
||||
--primary-light: #52a8ff;
|
||||
--text: #1f2b48;
|
||||
--text-sub: #5b6780;
|
||||
--muted: #8a94ad;
|
||||
--border: #e3e9f5;
|
||||
--radius: 12px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
color: var(--text);
|
||||
background: linear-gradient(120deg, #eef4ff 0%, #f7fbff 55%, #eaf3ff 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 20px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.card {
|
||||
background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.2);
|
||||
width: 420px; max-width: 92vw; padding: 40px 36px;
|
||||
|
||||
.glow {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.logo { text-align: center; margin-bottom: 28px; }
|
||||
.logo h1 { font-size: 22px; color: #1a1a2e; font-weight: 600; }
|
||||
.logo p { font-size: 13px; color: #8a8fa3; margin-top: 6px; }
|
||||
.field { margin-bottom: 18px; }
|
||||
.field label { display: block; font-size: 13px; color: #5a6072; margin-bottom: 7px; }
|
||||
.field input {
|
||||
width: 100%; height: 44px; padding: 0 14px; font-size: 14px;
|
||||
border: 1px solid #dcdfe8; border-radius: 8px; outline: none; transition: border-color .2s;
|
||||
.glow-1 { width: 380px; height: 380px; top: -120px; left: -100px; background: rgba(82, 168, 255, 0.28); }
|
||||
.glow-2 { width: 320px; height: 320px; bottom: -120px; right: -80px; background: rgba(57, 115, 255, 0.20); }
|
||||
|
||||
.auth-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 940px;
|
||||
min-height: 560px;
|
||||
background: #fff;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 18px 50px 0 rgba(37, 96, 169, 0.14), 0 2px 6px 0 rgba(31, 43, 72, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
.field input:focus { border-color: #667eea; }
|
||||
.btn {
|
||||
width: 100%; height: 44px; border: none; border-radius: 8px; cursor: pointer;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff; font-size: 15px; font-weight: 500; transition: opacity .2s;
|
||||
|
||||
/* ---------- 左侧品牌区 ---------- */
|
||||
.auth-side {
|
||||
width: 340px;
|
||||
flex: 0 0 340px;
|
||||
padding: 44px 34px 28px;
|
||||
background: linear-gradient(160deg, #1b3b8f 0%, #2f6fe4 52%, #52a8ff 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn:hover { opacity: .9; }
|
||||
.btn:disabled { opacity: .6; cursor: not-allowed; }
|
||||
.auth-side::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 260px; height: 260px;
|
||||
top: -90px; right: -110px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
.auth-side::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 190px; height: 190px;
|
||||
bottom: -70px; left: -60px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
|
||||
.brand-logo {
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 11px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1px solid rgba(255, 255, 255, 0.30);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.brand-logo svg { width: 22px; height: 22px; }
|
||||
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: .5px; }
|
||||
|
||||
.side-title {
|
||||
margin-top: 44px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.45;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.side-desc {
|
||||
margin-top: 12px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.9;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
|
||||
.side-illus { margin: auto 0; padding: 22px 0; position: relative; z-index: 1; }
|
||||
.side-illus svg { width: 100%; height: auto; display: block; }
|
||||
|
||||
.side-foot {
|
||||
position: relative; z-index: 1;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.16);
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.side-foot svg { width: 13px; height: 13px; }
|
||||
|
||||
/* ---------- 右侧表单区 ---------- */
|
||||
.auth-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 52px 56px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.panel-head { margin-bottom: 28px; }
|
||||
.panel-title { font-size: 27px; font-weight: 600; letter-spacing: .5px; }
|
||||
.panel-sub { margin-top: 9px; font-size: 13.5px; color: var(--text-sub); }
|
||||
|
||||
.error {
|
||||
background: #fff2f0; border: 1px solid #ffccc7; color: #cf1322;
|
||||
padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; display: none;
|
||||
display: none;
|
||||
align-items: flex-start;
|
||||
gap: 9px;
|
||||
background: #fff2f0;
|
||||
border: 1px solid #ffd4cf;
|
||||
color: #cf1322;
|
||||
padding: 11px 14px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 18px;
|
||||
animation: shake .32s ease;
|
||||
}
|
||||
.tenant-list { list-style: none; }
|
||||
.tenant-item {
|
||||
.error.show { display: flex; }
|
||||
.error svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
|
||||
.field { margin-bottom: 18px; }
|
||||
.field-label {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 16px; border: 1px solid #e4e7ee; border-radius: 8px;
|
||||
margin-bottom: 12px; cursor: pointer; transition: all .2s;
|
||||
font-size: 13px; color: var(--text-sub); margin-bottom: 8px; font-weight: 500;
|
||||
}
|
||||
.tenant-item:hover { border-color: #667eea; background: #f7f8ff; }
|
||||
.tenant-name { font-size: 15px; color: #1a1a2e; font-weight: 500; }
|
||||
.tenant-meta { font-size: 12px; color: #8a8fa3; margin-top: 3px; }
|
||||
.tenant-arrow { color: #c0c4d0; font-size: 18px; }
|
||||
.tip { text-align: center; font-size: 12px; color: #8a8fa3; margin-top: 20px; }
|
||||
.input-wrap { position: relative; }
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 14px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18px; height: 18px;
|
||||
color: #a7b1c7;
|
||||
pointer-events: none;
|
||||
transition: color .2s;
|
||||
}
|
||||
.input-wrap input {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
padding: 0 44px 0 42px;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: #fbfcff;
|
||||
outline: none;
|
||||
transition: border-color .2s, box-shadow .2s, background .2s;
|
||||
}
|
||||
.input-wrap input::placeholder { color: #adb6c9; }
|
||||
.input-wrap input:hover { border-color: var(--border); background: #fff; }
|
||||
.input-wrap input:focus {
|
||||
border-color: var(--primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(57, 115, 255, 0.12);
|
||||
}
|
||||
.input-wrap input:focus + .input-icon,
|
||||
.input-wrap:focus-within .input-icon { color: var(--primary); }
|
||||
|
||||
.eye-btn {
|
||||
position: absolute;
|
||||
right: 8px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 32px; height: 32px;
|
||||
border: none; background: transparent;
|
||||
border-radius: 8px;
|
||||
color: #a7b1c7;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: color .2s, background .2s;
|
||||
}
|
||||
.eye-btn:hover { color: var(--primary); background: #f0f5ff; }
|
||||
.eye-btn svg { width: 18px; height: 18px; }
|
||||
|
||||
.row-extra {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin: -4px 0 22px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.remember { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-sub); user-select: none; }
|
||||
.remember input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
|
||||
.link { color: var(--primary); text-decoration: none; cursor: pointer; transition: color .2s; }
|
||||
.link:hover { color: var(--primary-dark); text-decoration: underline; }
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, #3973ff 0%, #52a8ff 100%);
|
||||
color: #fff;
|
||||
font-size: 15.5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
box-shadow: 0 8px 20px rgba(57, 115, 255, 0.28);
|
||||
transition: transform .15s, box-shadow .2s, opacity .2s;
|
||||
}
|
||||
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(57, 115, 255, 0.34); }
|
||||
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 6px 14px rgba(57, 115, 255, 0.26); }
|
||||
.btn:disabled { opacity: .72; cursor: not-allowed; box-shadow: none; }
|
||||
.spinner {
|
||||
display: none;
|
||||
width: 16px; height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.45);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin .7s linear infinite;
|
||||
}
|
||||
.btn.is-loading .spinner { display: block; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* 第三方登录 */
|
||||
.third-area { margin-top: 4px; }
|
||||
.divider {
|
||||
position: relative; text-align: center; margin: 24px 0 14px;
|
||||
font-size: 12px; color: #a0a5b5;
|
||||
position: relative; text-align: center;
|
||||
margin: 26px 0 16px;
|
||||
font-size: 12px; color: #a3acbf;
|
||||
}
|
||||
.divider::before {
|
||||
content: ''; position: absolute; top: 50%; left: 0; right: 0;
|
||||
height: 1px; background: #e4e7ee;
|
||||
height: 1px; background: var(--border);
|
||||
}
|
||||
.divider span { position: relative; background: #fff; padding: 0 12px; }
|
||||
.third-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
|
||||
.third-btn {
|
||||
padding: 8px 16px; border: 1px solid #dcdfe8; border-radius: 20px;
|
||||
background: #fff; font-size: 13px; color: #5a6072; cursor: pointer;
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
color: var(--text-sub);
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
}
|
||||
.third-btn:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
background: #f5f9ff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 企业选择 */
|
||||
.tenant-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||||
.tenant-item {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
background: #fbfcff;
|
||||
transition: all .2s;
|
||||
}
|
||||
.tenant-item:hover {
|
||||
border-color: var(--primary);
|
||||
background: #f5f9ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 18px rgba(57, 115, 255, 0.10);
|
||||
}
|
||||
.tenant-avatar {
|
||||
width: 40px; height: 40px;
|
||||
flex: 0 0 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, rgba(57, 115, 255, 0.12) 0%, rgba(82, 168, 255, 0.16) 100%);
|
||||
color: var(--primary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.tenant-avatar svg { width: 20px; height: 20px; }
|
||||
.tenant-info { flex: 1; min-width: 0; }
|
||||
.tenant-name {
|
||||
font-size: 15px; font-weight: 500; color: var(--text);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.tenant-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
||||
.tenant-arrow { color: #c8cfdf; transition: transform .2s, color .2s; }
|
||||
.tenant-arrow svg { width: 18px; height: 18px; display: block; }
|
||||
.tenant-item:hover .tenant-arrow { color: var(--primary); transform: translateX(3px); }
|
||||
|
||||
.back { text-align: center; margin-top: 22px; font-size: 13px; }
|
||||
|
||||
.foot-tip {
|
||||
margin-top: 26px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.foot-tip svg { width: 13px; height: 13px; flex: 0 0 auto; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body { padding: 20px 14px; align-items: flex-start; }
|
||||
.auth-card { max-width: 520px; min-height: 0; flex-direction: column; }
|
||||
.auth-side { width: 100%; flex: none; padding: 30px 26px 24px; }
|
||||
.side-title { margin-top: 26px; font-size: 21px; }
|
||||
.side-illus { display: none; }
|
||||
.auth-main { padding: 34px 26px 30px; }
|
||||
.panel-title { font-size: 23px; }
|
||||
}
|
||||
.third-btn:hover { border-color: #667eea; color: #667eea; }
|
||||
.back { text-align: center; margin-top: 14px; }
|
||||
.back a { font-size: 13px; color: #667eea; text-decoration: none; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="logo">
|
||||
<h1>云泽统一认证中心</h1>
|
||||
<p>{{if eq .Step "tenant"}}请选择要进入的企业{{else}}登录后即可使用全部应用{{end}}</p>
|
||||
</div>
|
||||
<div class="glow glow-1"></div>
|
||||
<div class="glow glow-2"></div>
|
||||
|
||||
<div class="error" id="error"></div>
|
||||
<div class="auth-card">
|
||||
<!-- 左侧品牌区 -->
|
||||
<aside class="auth-side">
|
||||
<div class="brand">
|
||||
<span class="brand-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3l7 3v6c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6l7-3z"/>
|
||||
<path d="M9.2 12.2l2 2 3.6-4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="brand-name">云泽统一认证中心</span>
|
||||
</div>
|
||||
|
||||
{{if eq .Step "tenant"}}
|
||||
<!-- 企业选择步骤 -->
|
||||
<ul class="tenant-list">
|
||||
{{range .Tenants}}
|
||||
<li class="tenant-item" onclick="chooseTenant({{.Tid}})">
|
||||
<div>
|
||||
<div class="tenant-name">{{.TenantName}}</div>
|
||||
<div class="tenant-meta">{{if .Name}}{{.Name}} · {{end}}企业ID {{.Tid}}</div>
|
||||
<div class="side-title">一次登录<br>全平台通行</div>
|
||||
<div class="side-desc">
|
||||
基于 OIDC / OAuth 2.0 的统一身份底座，<br>
|
||||
为所有接入应用提供安全、一致的登录体验。
|
||||
</div>
|
||||
|
||||
<div class="side-illus">
|
||||
<svg viewBox="0 0 260 170" fill="none">
|
||||
<ellipse cx="130" cy="150" rx="98" ry="11" fill="rgba(255,255,255,.13)"/>
|
||||
<rect x="26" y="60" width="56" height="38" rx="9" fill="rgba(255,255,255,.14)"/>
|
||||
<rect x="36" y="70" width="26" height="4" rx="2" fill="rgba(255,255,255,.45)"/>
|
||||
<rect x="36" y="79" width="36" height="4" rx="2" fill="rgba(255,255,255,.28)"/>
|
||||
<rect x="184" y="52" width="50" height="34" rx="9" fill="rgba(255,255,255,.10)"/>
|
||||
<rect x="193" y="62" width="22" height="4" rx="2" fill="rgba(255,255,255,.36)"/>
|
||||
<path d="M130 26l40 15v30c0 22-17 39-40 47-23-8-40-25-40-47V41l40-15z"
|
||||
fill="rgba(255,255,255,.17)" stroke="rgba(255,255,255,.55)" stroke-width="1.6"/>
|
||||
<path d="M116 82l11 11 21-23" stroke="#fff" stroke-width="5.5"
|
||||
stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="side-foot">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<rect x="4" y="11" width="16" height="10" rx="2"/>
|
||||
<path d="M8 11V8a4 4 0 018 0v3"/>
|
||||
</svg>
|
||||
<span>© 2026 Yunzer · 连接已加密</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧表单区 -->
|
||||
<main class="auth-main">
|
||||
{{if eq .Step "tenant"}}
|
||||
<div class="panel-head">
|
||||
<h1 class="panel-title">选择企业</h1>
|
||||
<p class="panel-sub">该账号已加入多家企业，请选择要进入的空间</p>
|
||||
</div>
|
||||
|
||||
<div class="error" id="error">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/>
|
||||
</svg>
|
||||
<span id="errorText"></span>
|
||||
</div>
|
||||
|
||||
<ul class="tenant-list">
|
||||
{{range .Tenants}}
|
||||
<li class="tenant-item" onclick="chooseTenant({{.Tid}})">
|
||||
<span class="tenant-avatar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 21h18M5 21V7l7-4 7 4v14"/><path d="M10 21v-5h4v5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="tenant-info">
|
||||
<span class="tenant-name">{{.TenantName}}</span>
|
||||
<span class="tenant-meta">{{if .Name}}{{.Name}} · {{end}}企业ID {{.Tid}}</span>
|
||||
</span>
|
||||
<span class="tenant-arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 6l6 6-6 6"/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
|
||||
<div class="back"><a class="link" onclick="logout()">不是我的账号？切换账号</a></div>
|
||||
{{else}}
|
||||
<div class="panel-head">
|
||||
<h1 class="panel-title">欢迎登录</h1>
|
||||
<p class="panel-sub">请输入您的账号与密码以继续</p>
|
||||
</div>
|
||||
|
||||
<div class="error" id="error">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/>
|
||||
</svg>
|
||||
<span id="errorText"></span>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" onsubmit="return submitLogin(event)" autocomplete="on">
|
||||
<div class="field">
|
||||
<label class="field-label" for="account">账号</label>
|
||||
<div class="input-wrap">
|
||||
<input id="account" type="text" placeholder="手机号 / 邮箱 / 企业账号" autocomplete="username" autofocus>
|
||||
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tenant-arrow">›</span>
|
||||
</li>
|
||||
|
||||
<div class="field">
|
||||
<label class="field-label" for="password">密码</label>
|
||||
<div class="input-wrap">
|
||||
<input id="password" type="password" placeholder="请输入密码" autocomplete="current-password">
|
||||
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/>
|
||||
</svg>
|
||||
<button class="eye-btn" type="button" id="eyeBtn" onclick="togglePassword()" title="显示密码" aria-label="显示密码">
|
||||
<svg id="eyeOpen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z"/><circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg id="eyeOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="display:none">
|
||||
<path d="M3 3l18 18"/><path d="M10.6 6.2A9.9 9.9 0 0112 6c6.4 0 10 6 10 6a17 17 0 01-3.3 3.9M6.3 8.1A16.7 16.7 0 002 12s3.6 6 10 6c1.3 0 2.5-.3 3.6-.7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-extra">
|
||||
<label class="remember"><input type="checkbox" id="remember"> 记住账号</label>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="submitBtn" type="submit">
|
||||
<span class="spinner"></span>
|
||||
<span id="btnLabel">登 录</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="third-area" id="thirdArea" style="display:none">
|
||||
<div class="divider"><span>其他登录方式</span></div>
|
||||
<div class="third-list" id="thirdList"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
</ul>
|
||||
<div class="back"><a onclick="logout()">切换账号</a></div>
|
||||
{{else}}
|
||||
<!-- 账号密码登录 -->
|
||||
<form id="loginForm" onsubmit="return submitLogin(event)">
|
||||
<div class="field">
|
||||
<label>账号</label>
|
||||
<input id="account" type="text" placeholder="手机号 / 邮箱 / 企业账号" autocomplete="username" autofocus>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>密码</label>
|
||||
<input id="password" type="password" placeholder="请输入密码" autocomplete="current-password">
|
||||
</div>
|
||||
<button class="btn" id="submitBtn" type="submit">登 录</button>
|
||||
</form>
|
||||
|
||||
<!-- 第三方登录 -->
|
||||
<div class="third-area" id="thirdArea" style="display:none">
|
||||
<div class="divider"><span>其他登录方式</span></div>
|
||||
<div class="third-list" id="thirdList"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="tip">统一身份认证 · 一次登录，全平台通行</div>
|
||||
<div class="foot-tip">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3l7 3v6c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6l7-3z"/>
|
||||
</svg>
|
||||
<span>统一身份认证 · 一次登录，全平台通行</span>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var CLIENT_ID = "{{.ClientID}}";
|
||||
var REDIRECT = "{{.Redirect}}";
|
||||
|
||||
// 人机验证配置：页面加载时拉取，决定是否弹出极验
|
||||
var verifyCfg = { openVerify: 0, verifyType: '', needGeetest: false, geetestVersion: '4', captchaId: '' };
|
||||
// 极验 4.0 SDK：优先官方 CDN，失败回退到本地副本（static/js/gt4.js）
|
||||
var GEETEST_SDK_CDN = 'https://static.geetest.com/v4/gt4.js';
|
||||
var GEETEST_SDK_LOCAL = '/static/js/gt4.js';
|
||||
var geetestSDKPromise = null;
|
||||
|
||||
function showError(msg) {
|
||||
var el = document.getElementById('error');
|
||||
el.textContent = msg;
|
||||
el.style.display = 'block';
|
||||
var box = document.getElementById('error');
|
||||
document.getElementById('errorText').textContent = msg;
|
||||
box.classList.remove('show');
|
||||
void box.offsetWidth; // 重启动画
|
||||
box.classList.add('show');
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
var box = document.getElementById('error');
|
||||
if (box) box.classList.remove('show');
|
||||
}
|
||||
|
||||
function setBtnLoading(on, text) {
|
||||
var btn = document.getElementById('submitBtn');
|
||||
if (!btn) return;
|
||||
btn.disabled = !!on;
|
||||
if (on) {
|
||||
btn.classList.add('is-loading');
|
||||
document.getElementById('btnLabel').textContent = text || '登录中...';
|
||||
} else {
|
||||
btn.classList.remove('is-loading');
|
||||
document.getElementById('btnLabel').textContent = '登 录';
|
||||
}
|
||||
}
|
||||
|
||||
function togglePassword() {
|
||||
var input = document.getElementById('password');
|
||||
var open = document.getElementById('eyeOpen');
|
||||
var off = document.getElementById('eyeOff');
|
||||
var btn = document.getElementById('eyeBtn');
|
||||
var show = input.type === 'password';
|
||||
input.type = show ? 'text' : 'password';
|
||||
open.style.display = show ? 'none' : 'block';
|
||||
off.style.display = show ? 'block' : 'none';
|
||||
btn.title = show ? '隐藏密码' : '显示密码';
|
||||
}
|
||||
|
||||
// 记住账号：只存账号，绝不明文保存密码
|
||||
(function initRemember() {
|
||||
var box = document.getElementById('remember');
|
||||
if (!box) return;
|
||||
var saved = '';
|
||||
try { saved = localStorage.getItem('authCenterAccount') || ''; } catch (e) { saved = ''; }
|
||||
if (saved) {
|
||||
document.getElementById('account').value = saved;
|
||||
box.checked = true;
|
||||
}
|
||||
box.addEventListener('change', function () {
|
||||
try {
|
||||
if (box.checked) localStorage.setItem('authCenterAccount', document.getElementById('account').value.trim());
|
||||
else localStorage.removeItem('authCenterAccount');
|
||||
} catch (e) { /* 忽略隐私模式下的存储失败 */ }
|
||||
});
|
||||
})();
|
||||
|
||||
function loadScript(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var s = document.createElement('script');
|
||||
s.src = url;
|
||||
s.async = true;
|
||||
s.onload = function () { resolve(); };
|
||||
s.onerror = function () { reject(new Error('加载脚本失败')); };
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
}
|
||||
|
||||
// 加载极验 4.0 SDK（多次调用只加载一次）
|
||||
function loadGeetestSDK() {
|
||||
if (window.initGeetest4) return Promise.resolve();
|
||||
if (geetestSDKPromise) return geetestSDKPromise;
|
||||
geetestSDKPromise = loadScript(GEETEST_SDK_CDN)
|
||||
.catch(function () { return loadScript(GEETEST_SDK_LOCAL); })
|
||||
.then(function () {
|
||||
if (!window.initGeetest4) throw new Error('极验 SDK 加载失败');
|
||||
})
|
||||
.catch(function (err) {
|
||||
geetestSDKPromise = null;
|
||||
throw err;
|
||||
});
|
||||
return geetestSDKPromise;
|
||||
}
|
||||
|
||||
// 拉取登录验证配置（含极验 captcha_id）
|
||||
function loadVerifyConfig() {
|
||||
return fetch('/auth/verify-config')
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (res) {
|
||||
var d = (res && res.data) || {};
|
||||
verifyCfg.openVerify = Number(d.openVerify) || 0;
|
||||
verifyCfg.verifyType = d.verifyType || '';
|
||||
verifyCfg.needGeetest = !!d.needGeetest;
|
||||
verifyCfg.geetestVersion = d.geetestVersion || '4';
|
||||
verifyCfg.captchaId = d.captchaId || '';
|
||||
// 预加载 SDK，点击登录时能立刻弹出
|
||||
if (verifyCfg.needGeetest && verifyCfg.captchaId) {
|
||||
loadGeetestSDK().catch(function () { /* 点击时再提示 */ });
|
||||
}
|
||||
})
|
||||
.catch(function () { verifyCfg.needGeetest = false; });
|
||||
}
|
||||
|
||||
loadVerifyConfig();
|
||||
|
||||
// 加载已开通的第三方登录方式
|
||||
function loadThirdProviders() {
|
||||
fetch('/auth/third/list')
|
||||
@@ -135,6 +623,7 @@
|
||||
enabled.forEach(function (item) {
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'third-btn';
|
||||
btn.type = 'button';
|
||||
btn.textContent = item.name;
|
||||
btn.onclick = function () { startThird(item.provider); };
|
||||
box.appendChild(btn);
|
||||
@@ -151,28 +640,123 @@
|
||||
|
||||
loadThirdProviders();
|
||||
|
||||
// 弹出极验 4.0，验证通过才 resolve 出校验参数
|
||||
function showGeetest(captchaId) {
|
||||
return loadGeetestSDK().then(function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var settled = false;
|
||||
var done = function (fn) { if (settled) return; settled = true; fn(); };
|
||||
var instance = null;
|
||||
var teardown = function () {
|
||||
try { if (instance && instance.destroy) instance.destroy(); } catch (err) { /* ignore */ }
|
||||
};
|
||||
|
||||
window.initGeetest4({
|
||||
captchaId: captchaId,
|
||||
product: 'bind',
|
||||
language: 'zh-CN',
|
||||
https: true
|
||||
}, function (captcha) {
|
||||
instance = captcha;
|
||||
|
||||
captcha.onSuccess(function () {
|
||||
var r = captcha.getValidate() || {};
|
||||
teardown();
|
||||
done(function () {
|
||||
resolve({
|
||||
captcha_id: r.captcha_id || captchaId,
|
||||
lot_number: r.lot_number || '',
|
||||
pass_token: r.pass_token || '',
|
||||
gen_time: r.gen_time || '',
|
||||
captcha_output: r.captcha_output || ''
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
captcha.onFail(function () {
|
||||
teardown();
|
||||
done(function () { reject(new Error('人机验证未通过，请重新验证')); });
|
||||
});
|
||||
|
||||
captcha.onError(function () {
|
||||
teardown();
|
||||
done(function () { reject(new Error('人机验证加载失败，请重试')); });
|
||||
});
|
||||
|
||||
if (captcha.onClose) {
|
||||
captcha.onClose(function () {
|
||||
setTimeout(function () {
|
||||
if (settled) return;
|
||||
teardown();
|
||||
done(function () { reject(new Error('已取消人机验证')); });
|
||||
}, 400);
|
||||
});
|
||||
}
|
||||
|
||||
captcha.showCaptcha();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function submitLogin(e) {
|
||||
e.preventDefault();
|
||||
hideError();
|
||||
var account = document.getElementById('account').value.trim();
|
||||
var password = document.getElementById('password').value;
|
||||
if (!account) { showError('请输入账号'); return false; }
|
||||
if (!password) { showError('请输入密码'); return false; }
|
||||
|
||||
var btn = document.getElementById('submitBtn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = '登录中...';
|
||||
// 记住账号
|
||||
try {
|
||||
if (document.getElementById('remember').checked) localStorage.setItem('authCenterAccount', account);
|
||||
else localStorage.removeItem('authCenterAccount');
|
||||
} catch (err) { /* ignore */ }
|
||||
|
||||
// 开启极验时：先弹验证，通过后才继续登录
|
||||
if (verifyCfg.needGeetest) {
|
||||
if (!verifyCfg.captchaId) {
|
||||
showError('人机验证未配置，请联系管理员');
|
||||
return false;
|
||||
}
|
||||
setBtnLoading(true, '安全验证中...');
|
||||
showGeetest(verifyCfg.captchaId)
|
||||
.then(function (result) {
|
||||
setBtnLoading(true, '登录中...');
|
||||
doLogin(account, password, result);
|
||||
})
|
||||
.catch(function (err) {
|
||||
showError(err.message || '人机验证失败，请重试');
|
||||
setBtnLoading(false);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
setBtnLoading(true, '登录中...');
|
||||
doLogin(account, password, null);
|
||||
return false;
|
||||
}
|
||||
|
||||
function doLogin(account, password, captcha) {
|
||||
var payload = { account: account, password: password, client_id: CLIENT_ID, redirect: REDIRECT };
|
||||
if (captcha) {
|
||||
payload.captcha_id = captcha.captcha_id;
|
||||
payload.lot_number = captcha.lot_number;
|
||||
payload.pass_token = captcha.pass_token;
|
||||
payload.gen_time = captcha.gen_time;
|
||||
payload.captcha_output = captcha.captcha_output;
|
||||
}
|
||||
|
||||
fetch('/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ account: account, password: password, client_id: CLIENT_ID, redirect: REDIRECT })
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (res) {
|
||||
if (res.code !== 200) {
|
||||
showError(res.msg || '登录失败');
|
||||
btn.disabled = false;
|
||||
btn.textContent = '登 录';
|
||||
setBtnLoading(false);
|
||||
return;
|
||||
}
|
||||
if (res.need_choose_tenant) {
|
||||
@@ -184,13 +768,12 @@
|
||||
})
|
||||
.catch(function () {
|
||||
showError('网络异常，请稍后重试');
|
||||
btn.disabled = false;
|
||||
btn.textContent = '登 录';
|
||||
setBtnLoading(false);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function chooseTenant(tid) {
|
||||
hideError();
|
||||
fetch('/auth/switch-tenant', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -201,7 +784,8 @@
|
||||
if (res.code !== 200) { showError(res.msg || '切换失败'); return; }
|
||||
if (res.redirect) { window.location.href = res.redirect; return; }
|
||||
window.location.href = '/auth/login';
|
||||
});
|
||||
})
|
||||
.catch(function () { showError('网络异常，请稍后重试'); });
|
||||
}
|
||||
|
||||
function logout() {
|
||||
|
||||
Reference in New Issue
Block a user