robin/waf-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

登录页面改造

Browse Source
This commit is contained in:
robin
2026-02-15 14:27:28 +08:00
parent afbc0cde7e
commit 2a811183c4
19 changed files with 1612 additions and 2298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
EdgeUser/web/views/@default/index/index.css
View File

@@ -1,45 +1,261 @@
.form-box {
position: fixed;
top: 2.5em;
bottom: 0;
left: 0;
right: 0;
:root {
--primary-color: #0066ff;
--hover-color: #0052cc;
--bg-gradient-start: #0a192f;
--bg-gradient-end: #112240;
--text-main: #333333;
--text-sub: #888888;
--border-color: #e5e7eb;
}
form {
position: fixed;
width: 21em;
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body.login-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, #1e3a8a 100%);
position: relative;
}
body.login-page > div {
position: relative;
width: 100%;
height: 100vh;
min-height: 100vh;
}
.bg-layer {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.tech-bg {
position: absolute;
inset: 0;
opacity: 0.1;
background-image: radial-gradient(#ffffff 1px, transparent 1px), radial-gradient(#ffffff 1px, transparent 1px);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
.glow-circle {
position: absolute;
width: 800px;
height: 800px;
top: 50%;
left: 50%;
margin-left: -10em;
margin-top: -16em;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 102, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
pointer-events: none;
}
form .header {
.login-shell {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.form-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-card {
background: #ffffff;
width: 100%;
max-width: 460px;
padding: 48px 40px;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.card-header {
text-align: center;
font-size: 1em !important;
margin-bottom: 32px;
}
form p {
font-size: 0.8em;
margin-top: 0.3em;
margin-bottom: 0;
font-weight: normal;
padding: 0;
.brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
form .comment {
margin-top: 0.5em;
padding: 0.5em;
color: gray;
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 6px;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}
form .register-box {
.logo-icon i.icon {
margin: 0 !important;
font-size: 16px;
}
.logo-text {
font-size: 24px;
font-weight: 700;
color: var(--text-main);
line-height: 1;
}
.header-title {
font-size: 16px;
color: var(--text-sub);
font-weight: 400;
margin: 0;
}
.login-form {
margin: 0;
}
.login-form .input-group {
margin-bottom: 24px;
}
.login-form .input-label {
display: block;
font-size: 14px;
color: var(--text-main);
margin-bottom: 8px;
font-weight: 500;
}
.login-form .input-field-wrapper {
position: relative;
}
.login-form .ui.left.icon.input {
width: 100%;
}
.login-form .ui.left.icon.input .input-icon {
color: #9ca3af;
transition: color 0.3s;
}
.login-form .ui.left.icon.input input {
width: 100%;
height: 46px;
padding: 12px 16px 12px 42px;
font-size: 15px !important;
border: 1px solid var(--border-color);
border-radius: 6px;
outline: none;
color: var(--text-main);
background: #f9fafb;
transition: all 0.2s ease;
}
.login-form .ui.left.icon.input input::placeholder {
color: #9ca3af;
}
.login-form .ui.left.icon.input input:focus {
background: #ffffff;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}
.login-form .ui.left.icon.input:focus-within .input-icon {
color: var(--primary-color);
}
.remember-wrap {
margin-top: -4px;
margin-bottom: 10px;
}
.remember-wrap .ui.checkbox label {
font-size: 13px;
color: #6b7280;
}
.submit-btn.ui.button.primary {
width: 100%;
margin-top: 10px;
height: 50px;
border: none;
border-radius: 6px;
background: var(--primary-color);
color: #ffffff;
font-size: 16px !important;
font-weight: 600;
box-shadow: 0 4px 6px -1px rgba(0, 102, 255, 0.2);
transition: background 0.2s ease, transform 0.2s ease;
}
.submit-btn.ui.button.primary:hover {
background: var(--hover-color);
transform: translateY(-1px);
}
.register-box {
text-align: center;
margin-top: 1em;
margin-top: 12px;
font-size: 13px;
}
@media screen and (max-width: 512px) {
form {
width: 80%;
margin-left: -40%;
}
.register-box a {
color: #4183c4;
}
.disabled {
color: #ccc !important;
}
/*# sourceMappingURL=index.css.map */
@media screen and (max-width: 768px) {
body.login-page {
overflow: auto;
}
.form-box {
padding: 14px;
}
.login-card {
max-width: 100%;
margin: 0;
padding: 30px 18px;
}
}
/* SweetAlert2 fallback on login page */
body.login-page.swal2-height-auto {
height: 100% !important;
}
body.login-page .swal2-container {
position: fixed !important;
inset: 0 !important;
z-index: 20000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.625em !important;
}
body.login-page .swal2-container.swal2-backdrop-show {
background: rgba(0, 0, 0, 0.42) !important;
}
/*# sourceMappingURL=index.css.map */

120
EdgeUser/web/views/@default/index/index.html
View File

@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{$if eq .faviconFileId 0}
<link rel="shortcut icon" href="/images/favicon.png"/>
<link rel="shortcut icon" href="/images/favicon.png" />
{$else}
<link rel="shortcut icon" href="/ui/image/{$ .faviconFileId}"/>
<link rel="shortcut icon" href="/ui/image/{$ .faviconFileId}" />
{$end}
<title>登录{$ htmlEncode .systemName}</title>
<title>&#30331;&#24405;{$ htmlEncode .systemName}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
{$TEA.VUE}
{$TEA.SEMANTIC}
@@ -23,49 +23,81 @@
</style>
{$end}
</head>
<body style="background-image: url(/images/bg.jpg);width: 100% !important;height: 100% !important;background-size: cover !important;">
<body class="login-page">
<div>
{$template "/menu"}
<div class="form-box">
<form method="post" class="ui form" data-tea-action="$" data-tea-before="submitBefore" data-tea-done="submitDone" data-tea-success="submitSuccess" autocomplete="off">
<csrf-token></csrf-token>
<input type="hidden" name="password" v-model="passwordMd5"/>
<input type="hidden" name="token" v-model="token"/>
<div class="ui segment stacked">
<div class="ui header">
登录{$ htmlEncode .systemName}
</div>
<div class="ui field">
<div class="ui left icon input">
<i class="ui user icon small"></i>
<input type="text" name="username" v-model="username" :placeholder="usernamePlaceholder" maxlength="200" ref="usernameRef" @input="changeUsername"/>
</div>
</div>
<div class="ui field">
<div class="ui left icon input">
<i class="ui lock icon small"></i>
<input type="password" v-model="password" placeholder="请输入密码" maxlength="200" @input="changePassword()" ref="passwordRef"/>
</div>
</div>
<div class="ui field" v-show="showOTP">
<div class="ui left icon input">
<i class="ui barcode icon"></i>
<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
</div>
</div>
<button class="ui button primary fluid" type="submit" v-if="!isSubmitting">登录</button>
<button class="ui button primary fluid disabled" type="submit" v-if="isSubmitting">登录中...</button>
<div v-if="canRegister" class="register-box">
<a href="/register">注册新用户<span v-if="!canResetPassword">&nbsp; &raquo;</span></a><span v-if="canResetPassword"> &nbsp; <span class="disabled">|</span> &nbsp; <a href="/account/reset">找回密码</a></span>
</div>
</div>
</form>
<div class="bg-layer">
<div class="tech-bg"></div>
<div class="glow-circle"></div>
</div>
<div class="login-shell">
{$template "/menu"}
<div class="form-box">
<div class="login-card">
<div class="card-header">
<div class="brand-logo">
<span class="logo-icon"><i class="shield alternate icon"></i></span>
<span class="logo-text">{$ htmlEncode .systemName}</span>
</div>
<p class="header-title">&#26032;&#19968;&#20195; Web&#19982;APP &#24212;&#29992;&#38450;&#25252;&#24179;&#21488;</p>
</div>
<form method="post" class="ui form login-form" data-tea-action="$" data-tea-before="submitBefore" data-tea-done="submitDone" data-tea-success="submitSuccess" autocomplete="off">
<csrf-token></csrf-token>
<input type="hidden" name="password" v-model="passwordMd5"/>
<input type="hidden" name="token" v-model="token"/>
<div class="ui field input-group">
<label class="input-label">&#36134;&#21495;</label>
<div class="input-field-wrapper">
<div class="ui left icon input">
<i class="ui user icon small input-icon"></i>
<input type="text" name="username" v-model="username" :placeholder="usernamePlaceholder" maxlength="200" ref="usernameRef" @input="changeUsername"/>
</div>
</div>
</div>
<div class="ui field input-group">
<label class="input-label">&#23494;&#30721;</label>
<div class="input-field-wrapper">
<div class="ui left icon input">
<i class="ui lock icon small input-icon"></i>
<input type="password" v-model="password" placeholder="&#35831;&#36755;&#20837;&#23494;&#30721;" maxlength="200" @input="changePassword()" ref="passwordRef"/>
</div>
</div>
</div>
<div class="ui field input-group" v-show="showOTP">
<label class="input-label">&#23433;&#20840;&#39564;&#35777;</label>
<div class="input-field-wrapper">
<div class="ui left icon input">
<i class="ui barcode icon input-icon"></i>
<input type="text" name="otpCode" placeholder="&#35831;&#36755;&#20837; OTP &#21160;&#24577;&#30721;" maxlength="6"/>
</div>
</div>
</div>
<div class="ui field remember-wrap" v-if="false">
<div class="ui checkbox">
<input type="checkbox" name="remember" value="1" checked="checked"/>
<label>&#22312;&#36825;&#21488;&#30005;&#33041;&#19978;&#35760;&#20303;&#30331;&#24405;&#65288;14&#22825;&#65289;</label>
</div>
</div>
<button class="ui button primary fluid submit-btn" type="submit" v-if="!isSubmitting">&#30331;&#24405;</button>
<button class="ui button primary fluid disabled submit-btn" type="submit" disabled="disabled" v-if="isSubmitting">&#30331;&#24405;&#20013;...</button>
<div v-if="canRegister" class="register-box">
<a href="/register">&#27880;&#20876;&#26032;&#29992;&#25143;<span v-if="!canResetPassword">&nbsp; &raquo;</span></a><span v-if="canResetPassword"> &nbsp; <span class="disabled">|</span> &nbsp; <a href="/account/reset">&#25214;&#22238;&#23494;&#30721;</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
</html>

70
EdgeUser/web/views/@default/index/index.js
View File

@@ -4,26 +4,44 @@ Tea.context(function () {
this.passwordMd5 = "";
this.encodedFrom = window.encodeURIComponent(this.from);
this.showOTP = false
this.showOTP = false;
this.isSubmitting = false;
this.isSubmitting = false
this.usernamePlaceholder = "\u8bf7\u8f93\u5165\u7528\u6237\u540d";
let loginMethods = [];
if (this.emailCanLogin) {
loginMethods.push("\u90ae\u7bb1");
}
if (this.mobileCanLogin) {
loginMethods.push("\u624b\u673a\u53f7\u7801");
}
if (loginMethods.length > 0) {
this.usernamePlaceholder += "/" + loginMethods.join("/");
}
this.refreshPlaceholders = function () {
let usernameInput = document.querySelector("form input[name='username']");
if (usernameInput != null) {
usernameInput.setAttribute("placeholder", this.usernamePlaceholder);
}
let passwordInput = document.querySelector("form input[type='password']");
if (passwordInput != null) {
passwordInput.setAttribute("placeholder", "\u8bf7\u8f93\u5165\u5bc6\u7801");
}
let otpInput = document.querySelector("form input[name='otpCode']");
if (otpInput != null) {
otpInput.setAttribute("placeholder", "\u8bf7\u8f93\u5165 OTP \u52a8\u6001\u7801");
}
};
this.$delay(function () {
this.$find("form input[name='username']").focus();
this.changePassword();
})
this.usernamePlaceholder = "请输入用户名"
var loginMethods = []
if (this.emailCanLogin) {
loginMethods.push("邮箱")
}
if (this.mobileCanLogin) {
loginMethods.push("手机号码")
}
if (loginMethods.length > 0) {
this.usernamePlaceholder += "/" + loginMethods.join("/")
}
this.refreshPlaceholders();
setTimeout(() => this.refreshPlaceholders(), 200);
});
this.changeUsername = function () {
this.$post("/checkOTP")
@@ -31,27 +49,29 @@ Tea.context(function () {
username: this.username
})
.success(function (resp) {
this.showOTP = resp.data.requireOTP
})
}
this.showOTP = resp.data.requireOTP;
this.$delay(function () {
this.refreshPlaceholders();
});
});
};
this.changePassword = function () {
this.passwordMd5 = md5(this.password.trim());
}
};
// 更多选项
this.moreOptionsVisible = false;
this.showMoreOptions = function () {
this.moreOptionsVisible = !this.moreOptionsVisible;
}
};
this.submitBefore = function () {
this.isSubmitting = true;
}
};
this.submitDone = function () {
this.isSubmitting = false;
}
};
this.submitSuccess = function () {
if (this.from.length == 0) {
@@ -59,5 +79,5 @@ Tea.context(function () {
} else {
window.location = this.from;
}
}
})
};
});

293
EdgeUser/web/views/@default/index/index.less
View File

@@ -1,51 +1,260 @@
.form-box {
position: fixed;
top: 2.5em;
bottom: 0;
left: 0;
right: 0;
:root {
--primary-color: #0066ff;
--hover-color: #0052cc;
--bg-gradient-start: #0a192f;
--bg-gradient-end: #112240;
--text-main: #333333;
--text-sub: #888888;
--border-color: #e5e7eb;
}
form {
position: fixed;
width: 21em;
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body.login-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, #1e3a8a 100%);
position: relative;
}
body.login-page > div {
position: relative;
width: 100%;
height: 100vh;
min-height: 100vh;
}
.bg-layer {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.tech-bg {
position: absolute;
inset: 0;
opacity: 0.1;
background-image: radial-gradient(#ffffff 1px, transparent 1px), radial-gradient(#ffffff 1px, transparent 1px);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
.glow-circle {
position: absolute;
width: 800px;
height: 800px;
top: 50%;
left: 50%;
margin-left: -10em;
margin-top: -16em;
.header {
text-align: center;
font-size: 1em !important;
}
p {
font-size: 0.8em;
margin-top: 0.3em;
margin-bottom: 0;
font-weight: normal;
padding: 0;
}
.comment {
margin-top: 0.5em;
padding: 0.5em;
color: gray;
}
.register-box {
text-align: center;
margin-top: 1em;
}
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 102, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
pointer-events: none;
}
@media screen and (max-width: 512px) {
form {
width: 80%;
margin-left: -40%;
}
.login-shell {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.form-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-card {
background: #ffffff;
width: 100%;
max-width: 460px;
padding: 48px 40px;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.card-header {
text-align: center;
margin-bottom: 32px;
}
.brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 6px;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.logo-icon i.icon {
margin: 0 !important;
font-size: 16px;
}
.logo-text {
font-size: 24px;
font-weight: 700;
color: var(--text-main);
line-height: 1;
}
.header-title {
font-size: 16px;
color: var(--text-sub);
font-weight: 400;
margin: 0;
}
.login-form {
margin: 0;
}
.login-form .input-group {
margin-bottom: 24px;
}
.login-form .input-label {
display: block;
font-size: 14px;
color: var(--text-main);
margin-bottom: 8px;
font-weight: 500;
}
.login-form .input-field-wrapper {
position: relative;
}
.login-form .ui.left.icon.input {
width: 100%;
}
.login-form .ui.left.icon.input .input-icon {
color: #9ca3af;
transition: color 0.3s;
}
.login-form .ui.left.icon.input input {
width: 100%;
height: 46px;
padding: 12px 16px 12px 42px;
font-size: 15px !important;
border: 1px solid var(--border-color);
border-radius: 6px;
outline: none;
color: var(--text-main);
background: #f9fafb;
transition: all 0.2s ease;
}
.login-form .ui.left.icon.input input::placeholder {
color: #9ca3af;
}
.login-form .ui.left.icon.input input:focus {
background: #ffffff;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}
.login-form .ui.left.icon.input:focus-within .input-icon {
color: var(--primary-color);
}
.remember-wrap {
margin-top: -4px;
margin-bottom: 10px;
}
.remember-wrap .ui.checkbox label {
font-size: 13px;
color: #6b7280;
}
.submit-btn.ui.button.primary {
width: 100%;
margin-top: 10px;
height: 50px;
border: none;
border-radius: 6px;
background: var(--primary-color);
color: #ffffff;
font-size: 16px !important;
font-weight: 600;
box-shadow: 0 4px 6px -1px rgba(0, 102, 255, 0.2);
transition: background 0.2s ease, transform 0.2s ease;
}
.submit-btn.ui.button.primary:hover {
background: var(--hover-color);
transform: translateY(-1px);
}
.register-box {
text-align: center;
margin-top: 12px;
font-size: 13px;
}
.register-box a {
color: #4183c4;
}
.disabled {
color: #ccc !important;
}
color: #ccc !important;
}
@media screen and (max-width: 768px) {
body.login-page {
overflow: auto;
}
.form-box {
padding: 14px;
}
.login-card {
max-width: 100%;
margin: 0;
padding: 30px 18px;
}
}
/* SweetAlert2 fallback on login page */
body.login-page.swal2-height-auto {
height: 100% !important;
}
body.login-page .swal2-container {
position: fixed !important;
inset: 0 !important;
z-index: 20000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.625em !important;
}
body.login-page .swal2-container.swal2-backdrop-show {
background: rgba(0, 0, 0, 0.42) !important;
}