😎增加验证码过期提示

Admin.NET/Admin.NET.Core/Service/Auth/SysAuthService.cs

@@ -335,7 +335,8 @@ public class SysAuthService : IDynamicApiController, ITransient
     {
         var codeId = YitIdHelper.NextId().ToString();
         var captcha = _captcha.Generate(codeId);
-        return new { Id = codeId, Img = captcha.Base64 };
+        var expirySeconds = App.GetOptions<CaptchaOptions>()?.ExpirySeconds ?? 60;
+        return new { Id = codeId, Img = captcha.Base64, ExpirySeconds = expirySeconds };
     }
 
     /// <summary>

Web/src/components/noticeBar/index.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 	size: { type: [Number, String], default: 14 }, // 字体大小，单位px
 	height: { type: Number, default: 40 }, // 通知栏高度，单位px
 	delay: { type: Number, default: 1 }, // 动画延迟时间 (s)
-	speed: { type: Number, default: 200 }, // 滚动速率 (px/s)
+	speed: { type: Number, default: 100 }, // 滚动速率 (px/s)
 	scrollable: { type: Boolean, default: false }, // 是否开启垂直滚动
 	leftIcon: { type: String, default: 'iconfont icon-tongzhi2' }, // 自定义左侧图标
 	rightIcon: { type: String, default: '' }, // 自定义右侧图标

Web/src/views/login/component/account.vue

@@ -44,8 +44,8 @@
 				</el-col>
 				<el-col :span="1"></el-col>
 				<el-col :span="8">
-					<div class="login-content-code">
-						<img class="login-content-code-img" @click="getCaptcha" width="130px" height="38px" :src="state.captchaImage" style="cursor: pointer" />
+					<div :class="[state.expirySeconds > 0 ? 'login-content-code' : 'login-content-code-expired']" @click="getCaptcha">
+						<img class="login-content-code-img" width="130px" height="38px" :src="state.captchaImage" style="cursor: pointer" />
 					</div>
 				</el-col>
 			</el-form-item>
@@ -131,8 +131,12 @@ const state = reactive({
 	captchaEnabled: false,
 	isPassRotate: false,
 	capsLockVisible: false,
+	expirySeconds: 60, // 验证码过期时间
 });
 
+// 验证码过期计时器
+let timer: any = null;
+
 // 页面初始化
 onMounted(async () => {
 	// 若URL带有Token参数（第三方登录）
@@ -148,12 +152,23 @@ onMounted(async () => {
 	// 获取验证码
 	getCaptcha();
 
+	// 注册验证码过期计时器
+	if (state.captchaEnabled) {
+		timer = setInterval(() => {
+			if (state.expirySeconds > 0) state.expirySeconds -= 1;
+		}, 1000);
+	}
+
 	// 检测大小写按键/CapsLK
 	document.addEventListener('keyup', handleKeyPress);
 });
 
 // 页面卸载
 onUnmounted(() => {
+	// 销毁证码过期计时器
+	clearInterval(timer);
+	timer = null;
+
 	document.removeEventListener('keyup', handleKeyPress);
 });
 
@@ -171,6 +186,7 @@ const getCaptcha = async () => {
 	var res = await getAPI(SysAuthApi).apiSysAuthCaptchaGet();
 	state.captchaImage = 'data:text/html;base64,' + res.data.result?.img;
 	state.ruleForm.codeId = res.data.result?.id;
+	state.expirySeconds = res.data.result?.expirySeconds;
 };
 
 // 获取时间
@@ -347,6 +363,22 @@ defineExpose({ saveTokenAndInitRoutes });
 		}
 	}
 
+	.login-content-code-expired {
+		@extend .login-content-code;
+		&::before {
+			content: '验证码已过期';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 4px;
+			background-color: rgba(0, 0, 0, 0.5);
+			color: #ffffff;
+			text-align: center;
+		}
+	}
+
 	.login-content-submit {
 		width: 100%;
 		letter-spacing: 2px;