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

2
EdgeAdmin/web/views/@default/@layout.html
View File

@@ -86,7 +86,7 @@
<a href="" class="item" title="switch language" @click.prevent="switchLang" v-show="false"><i class="icon language"></i> </a>
<!-- 背景颜色 -->
<a href="" class="item" title="点击切换界面风格" @click.prevent="changeTheme()"><i class="icon adjust"></i></a>
<a href="" class="item" title="点击切换界面风格" @click.prevent="changeTheme()" v-if="false"><i class="icon adjust"></i></a>
<!-- 企业版 -->
<!-- <a :href="'/settings/authority'" class="item" title="商业版" :v-if="teaIsPlus"><i class="icon gem outline yellow"></i></a>-->

42
EdgeAdmin/web/views/@default/@layout_override.css
View File

@@ -1,9 +1,9 @@
/* 全局字体大小调整 - 增加 10% */
html {
font-size: 15.4px !important; /* 14px * 1.1 = 15.4px */
font-size: 16px !important;
}
body {
font-size: 15.4px !important; /* 14px * 1.1 = 15.4px */
font-size: 16px !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
@@ -77,4 +77,42 @@ body.swal2-shown {
background: rgba(230, 230, 230, 0.35) !important;
border-radius: 3px;
}
:root {
--admin-top-nav-bg: #0a1f3f;
--admin-side-menu-bg: #102a4d;
}
.top-nav.theme1,
.top-nav.theme2,
.top-nav.theme3,
.top-nav.theme4,
.top-nav.theme5,
.top-nav.theme6,
.top-nav.theme7 {
background: var(--admin-top-nav-bg) !important;
}
.main-menu.theme1,
.main-menu.theme2,
.main-menu.theme3,
.main-menu.theme4,
.main-menu.theme5,
.main-menu.theme6,
.main-menu.theme7,
.main-menu.theme1 .menu,
.main-menu.theme2 .menu,
.main-menu.theme3 .menu,
.main-menu.theme4 .menu,
.main-menu.theme5 .menu,
.main-menu.theme6 .menu,
.main-menu.theme7 .menu {
background: var(--admin-side-menu-bg) !important;
}
.main-menu .ui.menu .item.separator,
.main-menu .ui.menu .sub-items .item.separator {
display: none !important;
border: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/*# sourceMappingURL=@layout_override.css.map */

48
EdgeAdmin/web/views/@default/@layout_override.less
View File

@@ -1,10 +1,10 @@
// 全局字体大小调整 - 增加 10%
html {
font-size: 15.4px !important; // 14px * 1.1 = 15.4px
font-size: 16px !important;
}
body {
font-size: 15.4px !important; // 14px * 1.1 = 15.4px
font-size: 16px !important;
}
// labels
@@ -106,3 +106,47 @@ body.swal2-shown {
min-width: 5em;
}
}
// Menu background colors only
:root {
--admin-top-nav-bg: #0a1f3f;
--admin-side-menu-bg: #102a4d;
}
.top-nav.theme1,
.top-nav.theme2,
.top-nav.theme3,
.top-nav.theme4,
.top-nav.theme5,
.top-nav.theme6,
.top-nav.theme7 {
background: var(--admin-top-nav-bg) !important;
}
.main-menu.theme1,
.main-menu.theme2,
.main-menu.theme3,
.main-menu.theme4,
.main-menu.theme5,
.main-menu.theme6,
.main-menu.theme7,
.main-menu.theme1 .menu,
.main-menu.theme2 .menu,
.main-menu.theme3 .menu,
.main-menu.theme4 .menu,
.main-menu.theme5 .menu,
.main-menu.theme6 .menu,
.main-menu.theme7 .menu {
background: var(--admin-side-menu-bg) !important;
}
// Hide menu separators
.main-menu .ui.menu .item.separator,
.main-menu .ui.menu .sub-items .item.separator {
display: none !important;
border: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}

21
EdgeAdmin/web/views/@default/index/index.css
View File

@@ -25,7 +25,8 @@ body.login-page {
body.login-page > div {
position: relative;
width: 100%;
height: 100%;
height: 100vh;
min-height: 100vh;
}
.bg-layer {
@@ -241,4 +242,22 @@ body.login-page > div {
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 */

22
EdgeAdmin/web/views/@default/index/index.less
View File

@@ -25,7 +25,8 @@ body.login-page {
body.login-page > div {
position: relative;
width: 100%;
height: 100%;
height: 100vh;
min-height: 100vh;
}
.bg-layer {
@@ -241,3 +242,22 @@ body.login-page > div {
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;
}

10
EdgeUser/web/views/@default/@layout.html
View File

@@ -32,9 +32,9 @@
{$if not (eq .teaThemeBackgroundColor "")}
<style>
.top-nav,
.main-menu,
.main-menu .menu {
.top-nav.user-theme-enabled,
.main-menu.user-theme-enabled,
.main-menu.user-theme-enabled .menu {
background: #{$.teaThemeBackgroundColor} !important;
}
</style>
@@ -43,7 +43,7 @@
<script type="text/javascript">
(function () {
try {
var savedColor = localStorage.getItem("themeColor");
var savedColor = null;
if (savedColor) {
var styleId = "theme-color-custom";
var styleEl = document.getElementById(styleId);
@@ -87,7 +87,7 @@
<a href="/docs" class="item" :class="{active: teaMenu == 'docs'}"><i class="icon file"></i><span
class="hover-span"><span>文档</span></span></a>
<!-- 自定义主题颜色 -->
<theme-color-picker></theme-color-picker>
<theme-color-picker v-if="false"></theme-color-picker>
<a href="/" class="item" v-show="teaShowIndexPage">
<i class="icon home"></i><span class="hover-span"><span>首页</span></span>
</a>

45
EdgeUser/web/views/@default/@layout_override.css
View File

@@ -1,9 +1,9 @@
/* 全局字体大小调整 - 增加 10% */
html {
font-size: 15.4px !important; /* 14px * 1.1 = 15.4px */
font-size: 16px !important;
}
body {
font-size: 15.4px !important; /* 14px * 1.1 = 15.4px */
font-size: 16px !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
@@ -60,6 +60,47 @@ textarea::-webkit-scrollbar {
select.dropdown {
height: auto !important;
}
:root {
--admin-top-nav-bg: #0a1f3f;
--admin-side-menu-bg: #102a4d;
}
.top-nav,
.top-nav.theme1,
.top-nav.theme2,
.top-nav.theme3,
.top-nav.theme4,
.top-nav.theme5,
.top-nav.theme6,
.top-nav.theme7 {
background: var(--admin-top-nav-bg) !important;
}
.main-menu,
.main-menu.theme1,
.main-menu.theme2,
.main-menu.theme3,
.main-menu.theme4,
.main-menu.theme5,
.main-menu.theme6,
.main-menu.theme7,
.main-menu .menu,
.main-menu.theme1 .menu,
.main-menu.theme2 .menu,
.main-menu.theme3 .menu,
.main-menu.theme4 .menu,
.main-menu.theme5 .menu,
.main-menu.theme6 .menu,
.main-menu.theme7 .menu {
background: var(--admin-side-menu-bg) !important;
}
.main-menu .ui.menu .item.separator,
.main-menu .ui.menu .sub-items .item.separator {
display: none !important;
border: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.left-box .menu .item.active {
background: rgba(230, 230, 230, 0.35) !important;
border-radius: 3px;

50
EdgeUser/web/views/@default/@layout_override.less
View File

@@ -1,10 +1,10 @@
// 全局字体大小调整 - 增加 10%
html {
font-size: 15.4px !important; // 14px * 1.1 = 15.4px
font-size: 16px !important;
}
body {
font-size: 15.4px !important; // 14px * 1.1 = 15.4px
font-size: 16px !important;
}
// labels
@@ -78,3 +78,49 @@ textarea::-webkit-scrollbar {
select.dropdown {
height: auto !important;
}
// Menu background colors and separator cleanup
:root {
--admin-top-nav-bg: #0a1f3f;
--admin-side-menu-bg: #102a4d;
}
.top-nav,
.top-nav.theme1,
.top-nav.theme2,
.top-nav.theme3,
.top-nav.theme4,
.top-nav.theme5,
.top-nav.theme6,
.top-nav.theme7 {
background: var(--admin-top-nav-bg) !important;
}
.main-menu,
.main-menu.theme1,
.main-menu.theme2,
.main-menu.theme3,
.main-menu.theme4,
.main-menu.theme5,
.main-menu.theme6,
.main-menu.theme7,
.main-menu .menu,
.main-menu.theme1 .menu,
.main-menu.theme2 .menu,
.main-menu.theme3 .menu,
.main-menu.theme4 .menu,
.main-menu.theme5 .menu,
.main-menu.theme6 .menu,
.main-menu.theme7 .menu {
background: var(--admin-side-menu-bg) !important;
}
.main-menu .ui.menu .item.separator,
.main-menu .ui.menu .sub-items .item.separator {
display: none !important;
border: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}

276
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;
}
@media screen and (max-width: 512px) {
form {
width: 80%;
margin-left: -40%;
margin-top: 12px;
font-size: 13px;
}
.register-box a {
color: #4183c4;
}
.disabled {
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;
}
/*# sourceMappingURL=index.css.map */

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

@@ -7,7 +7,7 @@
{$else}
<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>
<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">
<form method="post" class="ui form" data-tea-action="$" data-tea-before="submitBefore" data-tea-done="submitDone" data-tea-success="submitSuccess" autocomplete="off">
<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 segment stacked">
<div class="ui header">
登录{$ htmlEncode .systemName}
</div>
<div class="ui field">
<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"></i>
<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 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 field input-group">
<label class="input-label">&#23494;&#30721;</label>
<div class="input-field-wrapper">
<div class="ui left icon input">
<i class="ui barcode icon"></i>
<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
<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>
<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 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">注册新用户<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>
<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>

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

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

277
EdgeUser/web/views/@default/login/index.css
View File

@@ -1,45 +1,262 @@
.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;
}
@media screen and (max-width: 512px) {
form {
width: 80%;
margin-left: -40%;
margin-top: 12px;
font-size: 13px;
}
.register-box a {
color: #4183c4;
}
.disabled {
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;
}
/*# sourceMappingURL=index.css.map */

71
EdgeUser/web/views/@default/login/index.html
View File

@@ -7,7 +7,7 @@
{$else}
<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,58 +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>
<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">
<form method="post" class="ui form" data-tea-action="$" data-tea-before="submitBefore" data-tea-done="submitDone" data-tea-success="submitSuccess" autocomplete="off">
<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 segment stacked">
<div class="ui header">
登录{$ htmlEncode .systemName}
</div>
<div class="ui field">
<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"></i>
<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 class="ui field">
</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"></i>
<input type="password" v-model="password" placeholder="请输入密码" maxlength="200" @input="changePassword()" ref="passwordRef"/>
<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 class="ui field" v-show="showOTP">
</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"></i>
<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
<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 class="ui field">
<a href="" @click.prevent="showMoreOptions()">更多选项 <i class="icon angle" :class="{down:!moreOptionsVisible, up:moreOptionsVisible}"></i> </a>
</div>
<div class="ui field" v-show="moreOptionsVisible">
<div class="ui field remember-wrap" v-if="false">
<div class="ui checkbox">
<input type="checkbox" name="remember" value="1" checked="checked"/>
<label>在这个电脑上记住登录（14天）</label>
<label>&#22312;&#36825;&#21488;&#30005;&#33041;&#19978;&#35760;&#20303;&#30331;&#24405;&#65288;14&#22825;&#65289;</label>
</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>
<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">注册新用户<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>
<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>

73
EdgeUser/web/views/@default/login/index.js
View File

@@ -1,26 +1,47 @@
Tea.context(function () {
this.username = "";
this.password = "";
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")
@@ -28,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) {
@@ -56,5 +79,5 @@ Tea.context(function () {
} else {
window.location = this.from;
}
}
})
};
});

269
EdgeUser/web/views/@default/login/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;
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;
}
.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;
}
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;
}
.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;
}
.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;
}
@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;
}

1984
config.xml
View File

File diff suppressed because it is too large Load Diff

0
deploy.sh → deploy/deploy.sh
View File

141
deploy/升级部署手册.md Normal file
View File

@@ -0,0 +1,141 @@
# CloudWAF 升级部署手册
## I. 管理端 (EdgeAdmin) 升级
本文档介绍如何使用 `deploy.sh` 自动化脚本对 EdgeAdmin 服务进行升级部署。
### 1. 准备工作
在开始升级之前，请确保已满足以下条件：
1. **文件准备**
- `deploy.sh`: 部署脚本
- `edge-admin-linux-amd64-plus-vX.X.X.zip`: 对应版本的 EdgeAdmin 更新包
2. **上传文件**
将上述两个文件上传到服务器的同一目录下（例如 `/root` 或 `/tmp`）。
3. **赋予脚本执行权限**
在终端中执行命令：
```bash
chmod +x deploy.sh
```
### 2. 确认安装路径
脚本默认的安装路径为 `/usr/local/goedge`。如果您的服务安装在其他位置，请按以下方法修改：
**方法 A：修改脚本（推荐）**
使用文本编辑器（如 vi/nano）打开 `deploy.sh`，修改第 10 行：
```bash
# 将默认路径修改为您的实际安装路径
INSTALL_BASE_DIR="/您实际的/安装路径"
```
**方法 B：使用环境变量（临时）**
在执行脚本时指定环境变量：
```bash
export BRAND_INSTALL_PATH="/您实际的/安装路径"
```
### 3. 执行升级
使用 root 用户或 sudo 执行脚本，参数为更新包的路径。
#### 3.1 运行命令
```bash
# 示例：更新当前目录下的 zip 包
sudo ./deploy.sh ./edge-admin-linux-amd64-plus-v1.3.8.zip
```
#### 3.2 确认升级
脚本运行后会显示升级信息预览，请检查路径是否正确：
```text
CloudWAF 部署脚本 - Gname DNS 提供商更新
==========================================
部署配置:
ZIP 文件: ...
目标目录: /usr/local/goedge/edge-admin
备份目录: /usr/local/goedge/backup_20240215_120000
确认开始部署? (y/N):
```
输入 `y` 并回车确认。
### 4. 升级过程说明
脚本会自动执行以下步骤：
1. **备份**：将当前的配置 (`configs/`) 和数据备份到 `backup_YYYYMMDD_HHMMSS` 目录。
2. **停止服务**：停止正在运行的 `edge-admin` 进程。
3. **解压**：解压新的安装包到临时目录。
4. **替换**：
- 覆盖 `bin/edge-admin` 可执行文件。
- 覆盖 `web/` 前端文件（保留 `web/tmp`）。
- 覆盖 `edge-api/` 相关文件（如果存在）。
5. **恢复配置**：将备份的 `configs/api_admin.yaml` 等配置文件恢复到新目录，**确保原有配置不丢**。
6. **启动服务**：重新启动 `edge-admin` 服务。
### 5. 验证与故障排查
升级完成后，请进行以下检查：
- **检查进程**：`ps aux | grep edge-admin`
- **查看日志**：`tail -f /安装路径/edge-admin/logs/run.log`
- **登录验证**：使用浏览器访问管理后台，确认升级成功。
---
## II. 用户端 (EdgeUser) 升级
EdgeUser (用户控制台) 尚未提供自动化脚本，请按照以下步骤手动升级。
### ⚠️ 重要提示：关于自定义样式
如果您修改过 `web/` 目录下的 HTML/CSS (例如登录页)，请务必在升级前**手动备份这些文件**。
升级过程中的 `web` 目录覆盖会导致您的自定义修改丢失。
### 1. 备份 (Backup)
```bash
# 假设安装目录在 /opt/edge-user
cp -r /opt/edge-user /opt/edge-user-backup-$(date +%Y%m%d)
```
*关键文件是 `configs/api_user.yaml`，这是连接 API 的凭证，**千万不要丢失**。*
### 2. 上传与准备 (Prepare)
将 `edge-user-linux-amd64-plus-vX.X.X.zip` 上传到服务器并解压到临时目录。
```bash
unzip edge-user-linux-amd64-plus-v1.3.8.zip -d /tmp/edge-user-update
```
### 3. 停止服务 (Stop)
```bash
/opt/edge-user/bin/edge-user stop
```
### 4. 替换文件 (Replace)
执行以下命令替换程序文件：
```bash
# 1. 替换二进制文件
cp -f /tmp/edge-user-update/edge-user/bin/edge-user /opt/edge-user/bin/
# 2. 替换前端资源 (Web)
# [警告] 此操作会重置所有页面样式
cp -rf /tmp/edge-user-update/edge-user/web /opt/edge-user/
# 3. 恢复自定义样式 (如果有备份)
# cp /备份路径/login/index.html /opt/edge-user/web/views/@default/login/
```
**注意：不要覆盖 `configs` 目录，以保留您的 `api_user.yaml` 配置。**
### 5. 重启服务 (Start)
```bash
/opt/edge-user/bin/edge-user start
```
### 6. 验证 (Verify)
查看日志确定启动成功，并访问用户平台页面。
```bash
tail -f /opt/edge-user/logs/run.log
```