登录页面改造

EdgeAdmin/web/views/@default/@layout.html

@@ -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>-->

EdgeAdmin/web/views/@default/@layout_override.css

@@ -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 */

EdgeAdmin/web/views/@default/@layout_override.less

@@ -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;
+}

EdgeAdmin/web/views/@default/index/index.css

@@ -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 */

EdgeAdmin/web/views/@default/index/index.less

@@ -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;
+}

EdgeUser/web/views/@default/@layout.html

@@ -32,9 +32,9 @@
 
     {$if not (eq .teaThemeBackgroundColor "")}
     <style>
-        .top-nav,
+        .top-nav.user-theme-enabled,
-        .main-menu,
+        .main-menu.user-theme-enabled,
-        .main-menu .menu {
+        .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>

EdgeUser/web/views/@default/@layout_override.css

@@ -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;

EdgeUser/web/views/@default/@layout_override.less

@@ -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;
+}

EdgeUser/web/views/@default/index/index.css

@@ -1,45 +1,261 @@
-.form-box {
+:root {
-  position: fixed;
+  --primary-color: #0066ff;
-  top: 2.5em;
+  --hover-color: #0052cc;
-  bottom: 0;
+  --bg-gradient-start: #0a192f;
-  left: 0;
+  --bg-gradient-end: #112240;
-  right: 0;
+  --text-main: #333333;
+  --text-sub: #888888;
+  --border-color: #e5e7eb;
 }
-form {
+
-  position: fixed;
+html,
-  width: 21em;
+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;
+  transform: translate(-50%, -50%);
-  margin-top: -16em;
+  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;
+.brand-logo {
-  margin-top: 0.3em;
+  display: inline-flex;
-  margin-bottom: 0;
+  align-items: center;
-  font-weight: normal;
+  gap: 10px;
-  padding: 0;
+  margin-bottom: 12px;
 }
-form .comment {
+
-  margin-top: 0.5em;
+.logo-icon {
-  padding: 0.5em;
+  width: 36px;
-  color: gray;
+  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 {
+.register-box a {
-    width: 80%;
+  color: #4183c4;
-    margin-left: -40%;
-  }
 }
+
 .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 */

EdgeUser/web/views/@default/index/index.html

@@ -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>
+	<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">
+					<div class="ui field input-group">
-					登录{$ htmlEncode .systemName}
+						<label class="input-label">&#36134;&#21495;</label>
-				</div>
+						<div class="input-field-wrapper">
-				<div class="ui field">
 							<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>
+								<i class="ui lock icon small input-icon"></i>
-						<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
+								<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>
+					<div class="ui field input-group" v-show="showOTP">
-				<button class="ui button primary fluid disabled" type="submit" v-if="isSubmitting">登录中...</button>
+						<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>
+						<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>
 					</div>
 				</form>
 			</div>
-
+		</div>
+	</div>
 </div>
 
 </body>
+
 </html>

EdgeUser/web/views/@default/index/index.js

@@ -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.refreshPlaceholders();
-
+		setTimeout(() => this.refreshPlaceholders(), 200);
-	this.usernamePlaceholder = "请输入用户名"
+	});
-	var loginMethods = []
-	if (this.emailCanLogin) {
-		loginMethods.push("邮箱")
-	}
-	if (this.mobileCanLogin) {
-		loginMethods.push("手机号码")
-	}
-	if (loginMethods.length > 0) {
-		this.usernamePlaceholder += "/" + loginMethods.join("/")
-	}
 
 	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;
 		}
-	}
+	};
-})
+});

EdgeUser/web/views/@default/index/index.less

@@ -1,51 +1,260 @@
-.form-box {
+:root {
-    position: fixed;
+    --primary-color: #0066ff;
-    top: 2.5em;
+    --hover-color: #0052cc;
-    bottom: 0;
+    --bg-gradient-start: #0a192f;
-    left: 0;
+    --bg-gradient-end: #112240;
-    right: 0;
+    --text-main: #333333;
+    --text-sub: #888888;
+    --border-color: #e5e7eb;
 }
 
-form {
+html,
-    position: fixed;
+body {
-    width: 21em;
+    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;
+    transform: translate(-50%, -50%);
-    margin-top: -16em;
+    border-radius: 50%;
-
+    background: radial-gradient(circle, rgba(0, 102, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
-	.header {
+    pointer-events: none;
-		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;
-	}
 }
 
-@media screen and (max-width: 512px) {
+.login-shell {
-    form {
+    position: relative;
-        width: 80%;
+    z-index: 10;
-        margin-left: -40%;
+    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;
 }
+
+@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;
+}

EdgeUser/web/views/@default/login/index.css

@@ -1,45 +1,262 @@
-.form-box {
+:root {
-  position: fixed;
+  --primary-color: #0066ff;
-  top: 2.5em;
+  --hover-color: #0052cc;
-  bottom: 0;
+  --bg-gradient-start: #0a192f;
-  left: 0;
+  --bg-gradient-end: #112240;
-  right: 0;
+  --text-main: #333333;
+  --text-sub: #888888;
+  --border-color: #e5e7eb;
 }
-form {
+
-  position: fixed;
+html,
-  width: 21em;
+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;
+  transform: translate(-50%, -50%);
-  margin-top: -16em;
+  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;
+.brand-logo {
-  margin-top: 0.3em;
+  display: inline-flex;
-  margin-bottom: 0;
+  align-items: center;
-  font-weight: normal;
+  gap: 10px;
-  padding: 0;
+  margin-bottom: 12px;
 }
-form .comment {
+
-  margin-top: 0.5em;
+.logo-icon {
-  padding: 0.5em;
+  width: 36px;
-  color: gray;
+  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 {
+.register-box a {
-    width: 80%;
+  color: #4183c4;
-    margin-left: -40%;
-  }
 }
+
 .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 */

EdgeUser/web/views/@default/login/index.html

@@ -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,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">
+					<div class="ui field input-group">
-					登录{$ htmlEncode .systemName}
+						<label class="input-label">&#36134;&#21495;</label>
-				</div>
+						<div class="input-field-wrapper">
-				<div class="ui field">
 							<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>
+								<i class="ui lock icon small input-icon"></i>
-						<input type="password" v-model="password" placeholder="请输入密码" maxlength="200" @input="changePassword()" ref="passwordRef"/>
+								<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>
+								<i class="ui barcode icon input-icon"></i>
-						<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
+								<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 submit-btn" type="submit" v-if="!isSubmitting">&#30331;&#24405;</button>
-				<button class="ui button primary fluid disabled" type="submit" v-if="isSubmitting">登录中...</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>
+						<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>
 					</div>
 				</form>
 			</div>
-
+		</div>
+	</div>
 </div>
 
 </body>
+
 </html>

EdgeUser/web/views/@default/login/index.js

@@ -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.refreshPlaceholders();
-
+		setTimeout(() => this.refreshPlaceholders(), 200);
-	this.usernamePlaceholder = "请输入用户名"
+	});
-	var loginMethods = []
-	if (this.emailCanLogin) {
-		loginMethods.push("邮箱")
-	}
-	if (this.mobileCanLogin) {
-		loginMethods.push("手机号码")
-	}
-	if (loginMethods.length > 0) {
-		this.usernamePlaceholder += "/" + loginMethods.join("/")
-	}
 
 	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;
 		}
-	}
+	};
-})
+});

EdgeUser/web/views/@default/login/index.less

@@ -1,51 +1,260 @@
-.form-box {
+:root {
-    position: fixed;
+    --primary-color: #0066ff;
-    top: 2.5em;
+    --hover-color: #0052cc;
-    bottom: 0;
+    --bg-gradient-start: #0a192f;
-    left: 0;
+    --bg-gradient-end: #112240;
-    right: 0;
+    --text-main: #333333;
+    --text-sub: #888888;
+    --border-color: #e5e7eb;
 }
 
-form {
+html,
-    position: fixed;
+body {
-    width: 21em;
+    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;
+    transform: translate(-50%, -50%);
-    margin-top: -16em;
+    border-radius: 50%;
-
+    background: radial-gradient(circle, rgba(0, 102, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
-	.header {
+    pointer-events: none;
-		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;
-	}
 }
 
-@media screen and (max-width: 512px) {
+.login-shell {
-    form {
+    position: relative;
-        width: 80%;
+    z-index: 10;
-        margin-left: -40%;
+    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;
 }
+
+@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;
+}

deploy/升级部署手册.md

@@ -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
+```