diff --git a/EdgeAdmin/internal/web/actions/default/index/index.go b/EdgeAdmin/internal/web/actions/default/index/index.go index 20735a4..33f8375 100644 --- a/EdgeAdmin/internal/web/actions/default/index/index.go +++ b/EdgeAdmin/internal/web/actions/default/index/index.go @@ -105,6 +105,8 @@ func (this *IndexAction) RunGet(params struct { return } this.Data["systemName"] = uiConfig.AdminSystemName + this.Data["logoFileId"] = uiConfig.LogoFileId + this.Data["productName"] = uiConfig.ProductName this.Data["showVersion"] = uiConfig.ShowVersion if len(uiConfig.Version) > 0 { this.Data["version"] = uiConfig.Version diff --git a/EdgeAdmin/web/views/@default/index/index.css b/EdgeAdmin/web/views/@default/index/index.css index 91c8961..4a54665 100644 --- a/EdgeAdmin/web/views/@default/index/index.css +++ b/EdgeAdmin/web/views/@default/index/index.css @@ -1,38 +1,234 @@ -.form-box { - position: fixed; - top: 2em; - 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: 100%; +} + +.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; } -@media screen and (max-width: 512px) { - form { - width: 80%; - margin-left: -40%; + +.logo-image-wrap { + width: 36px; + height: 36px; + border-radius: 6px; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: #ffffff; +} + +.logo-image { + width: 100%; + height: 100%; + object-fit: contain; +} + +.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); +} + +.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); +} + +@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; } } -/*# sourceMappingURL=index.css.map */ \ No newline at end of file +/*# sourceMappingURL=index.css.map */ diff --git a/EdgeAdmin/web/views/@default/index/index.html b/EdgeAdmin/web/views/@default/index/index.html index be516fc..3c508fe 100644 --- a/EdgeAdmin/web/views/@default/index/index.html +++ b/EdgeAdmin/web/views/@default/index/index.html @@ -7,57 +7,70 @@ {$else} {$end} - 登录{$ htmlEncode .systemName} - + 登录{$ htmlEncode .systemName} + {$TEA.VUE} {$TEA.SEMANTIC} - - - - + + + + - +
- {$template "/menu"} +
+
+
+
-
-
- - - -
-
- 登录{$ htmlEncode .systemName} -
-
-
- - -
-
-
-
- - -
-
-
- 更多选项 -
-
-
- - -
-
+ - -
+
+ +
+
- - \ No newline at end of file + diff --git a/EdgeAdmin/web/views/@default/index/index.js b/EdgeAdmin/web/views/@default/index/index.js index c395153..cf5795b 100644 --- a/EdgeAdmin/web/views/@default/index/index.js +++ b/EdgeAdmin/web/views/@default/index/index.js @@ -11,9 +11,23 @@ Tea.context(function () { this.isSubmitting = false + this.refreshPlaceholders = function () { + let usernameInput = document.querySelector("form input[name='username']") + if (usernameInput != null) { + usernameInput.setAttribute("placeholder", "\u8bf7\u8f93\u5165\u8d26\u53f7") + } + let passwordInput = document.querySelector("form input[type='password']") + if (passwordInput != null) { + passwordInput.setAttribute("placeholder", "\u8bf7\u8f93\u5165\u5bc6\u7801") + } + } + this.$delay(function () { this.$find("form input[name='username']").focus() this.changePassword() + this.refreshPlaceholders() + // Some UI scripts mutate placeholders after mount; enforce once more. + setTimeout(() => this.refreshPlaceholders(), 200) }); this.changeUsername = function () { @@ -56,4 +70,4 @@ Tea.context(function () { } }) }; -}); \ No newline at end of file +}); diff --git a/EdgeAdmin/web/views/@default/index/index.less b/EdgeAdmin/web/views/@default/index/index.less index 4de9503..8e0aadf 100644 --- a/EdgeAdmin/web/views/@default/index/index.less +++ b/EdgeAdmin/web/views/@default/index/index.less @@ -1,42 +1,233 @@ -.form-box { - position: fixed; - top: 2em; - 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: 100%; +} + +.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; - } + 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-image-wrap { + width: 36px; + height: 36px; + border-radius: 6px; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: #ffffff; +} + +.logo-image { + width: 100%; + height: 100%; + object-fit: contain; +} + +.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); +} + +.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); +} + +@media screen and (max-width: 768px) { + body.login-page { + overflow: auto; } -} \ No newline at end of file + + .form-box { + padding: 14px; + } + + .login-card { + max-width: 100%; + margin: 0; + padding: 30px 18px; + } +}