✨ Introducing new features. 增加密码强度组件

.env

@@ -20,7 +20,7 @@ VITE_GEN_PROXY_PATH = http://localhost:5003
 VITE_WEBSOCKET_ENABLE = false
 
 # 是否开启注册
-VITE_REGISTER_ENABLE  = false
+VITE_REGISTER_ENABLE  = true
 
 # 代码代码前缀
 VITE_PUBLIC_PATH = /

src/components/StrengthMeter/index.vue

@@ -0,0 +1,119 @@
+<template>
+	<div class="prefixCls relative" style="width: 100%">
+		<el-input v-model="innerValueRef" v-bind="$attrs" type="password" show-password @change="handleChange" style="width: 100%">
+			<template #[item]="data" v-for="item in Object.keys($slots)">
+				<slot :name="item" v-bind="data || {}"></slot>
+			</template>
+		</el-input>
+		<div class="prefixCls-bar">
+			<div class="prefixCls-bar--fill" :data-score="getPasswordStrength"></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="StrengthMeter">
+import { verifyPasswordStrength } from '/@/utils/toolsValidate';
+const props = defineProps({
+	value: {
+		type: String,
+	},
+	showInput: {
+		type: Boolean,
+		default: () => {
+			return true;
+		},
+	},
+	disabled: {
+		type: Boolean,
+	},
+});
+
+const emit = defineEmits(['score', 'change', 'update:value']);
+
+// 计算密码强度
+const getPasswordStrength = computed(() => {
+	const { disabled } = props;
+	if (disabled) return -1;
+	const innerValue = unref(innerValueRef);
+	const score = innerValue ? verifyPasswordStrength(innerValue) : -1;
+	emit('score', score);
+	return score;
+});
+
+const innerValueRef = ref();
+
+const handleChange = (e: any) => {
+	console.log(e, 'eeee');
+	innerValueRef.value = e;
+};
+
+watchEffect(() => {
+	innerValueRef.value = props.value || '';
+});
+
+watch(
+	() => unref(innerValueRef),
+	(val) => {
+		emit('update:value', val);
+		emit('change', val);
+	}
+);
+</script>
+
+<style scoped lang="scss">
+.prefixCls {
+	&-bar {
+		position: relative;
+		height: 6px;
+		margin: 10px auto 6px;
+		background-color: grey;
+		border-radius: 6px;
+
+		&::before,
+		&::after {
+			position: absolute;
+			z-index: 10;
+			display: block;
+			width: 33%;
+			height: inherit;
+			background-color: transparent;
+			border-color: white;
+			border-style: solid;
+			border-width: 0 5px;
+			content: '';
+		}
+
+		&::before {
+			left: 33%;
+		}
+		//
+		//&::after {
+		//	right: 33%;
+		//}
+
+		&--fill {
+			position: absolute;
+			width: 0;
+			height: inherit;
+			background-color: transparent;
+			border-radius: inherit;
+			transition: width 0.5s ease-in-out, background 0.25s;
+
+			&[data-score='1'] {
+				width: 33%;
+				background-color: var(--el-color-danger);
+			}
+
+			&[data-score='2'] {
+				width: 67%;
+				background-color: var(--el-color-warning);
+			}
+
+			&[data-score='3'] {
+				width: 100%;
+				background-color: var(--el-color-success);
+			}
+		}
+	}
+}
+</style>

src/utils/toolsValidate.ts

@@ -253,14 +253,14 @@ export function verifyPasswordPowerful(val: string) {
  * @returns 返回处理后的字符串：弱、中、强
  */
 export function verifyPasswordStrength(val: string) {
-	let v = '';
+	let v = '0';
 	// 弱：纯数字，纯字母，纯特殊字符
-	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱';
+	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,100}$/.test(val)) v = '1';
 	// 中：字母+数字，字母+特殊字符，数字+特殊字符
-	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中';
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,100}$/.test(val)) v = '2';
 	// 强：字母+数字+特殊字符
-	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,100}$/.test(val))
-		v = '强';
+		v = '3';
 	// 返回结果
 	return v;
 }

src/views/admin/user/personal.vue

@@ -61,12 +61,19 @@
 							</el-col>
 							<el-col :span="24" class="mb20">
 								<el-form-item label="新密码" prop="newpassword1">
-									<el-input v-model="passwordFormData.newpassword1" clearable type="password"></el-input>
+									<strength-meter
+										v-model="passwordFormData.newpassword1"
+										:minlength="6"
+										:maxlength="16"
+										@score="handleScore"
+										placeholder="请输入新密码"
+									></strength-meter>
+									<!--									<el-input v-model="passwordFormData.newpassword1" clearable type="password"></el-input>-->
 								</el-form-item>
 							</el-col>
 							<el-col :span="24" class="mb20">
 								<el-form-item label="确认密码" prop="newpassword2">
-									<el-input v-model="passwordFormData.newpassword2" clearable type="password"></el-input>
+									<strength-meter v-model="passwordFormData.newpassword2" :minlength="6" :maxlength="16" placeholder="请重复密码"></strength-meter>
 								</el-form-item>
 							</el-col>
 							<el-col :span="24" class="mb20">
@@ -114,6 +121,7 @@ import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
 const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
+const StrengthMeter = defineAsyncComponent(() => import('/@/components/StrengthMeter/index.vue'));
 
 const visible = ref(false);
 
@@ -154,6 +162,10 @@ const validatorPassword2 = (rule: any, value: any, callback: any) => {
 	}
 };
 
+const handleScore = (e) => {
+	console.log(e, 'eee');
+};
+
 const passwordRuleForm = reactive({
 	password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
 	newpassword1: [

src/views/login/component/register.vue

@@ -10,26 +10,19 @@
 			</el-input>
 		</el-form-item>
 		<el-form-item class="login-animation2" prop="password">
-			<el-input
+			<strength-meter
-				:type="state.isShowPassword ? 'text' : 'password'"
 				:placeholder="$t('password.accountPlaceholder2')"
 				v-model="state.ruleForm.password"
 				autocomplete="off"
-			>
+				:maxLength="20"
-				<template #prefix>
+				:minLength="6"
+				@score="handlePassScore"
+				><template #prefix>
 					<el-icon class="el-input__icon">
 						<ele-Unlock />
 					</el-icon>
 				</template>
-				<template #suffix>
+			</strength-meter>
-					<i
-						class="iconfont el-input__icon login-content-password"
-						:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
-						@click="state.isShowPassword = !state.isShowPassword"
-					>
-					</i>
-				</template>
-			</el-input>
 		</el-form-item>
 		<el-form-item class="login-animation3" prop="phone">
 			<el-input text :placeholder="$t('password.phonePlaceholder4')" v-model="state.ruleForm.phone" clearable autocomplete="off">
@@ -55,6 +48,7 @@ import { useMessage } from '/@/hooks/message';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['afterSuccess']);
+const StrengthMeter = defineAsyncComponent(() => import('/@/components/StrengthMeter/index.vue'));
 
 const { t } = useI18n();
 const dataFormRef = ref();
@@ -105,8 +99,21 @@ const dataRules = ref({
 			message: '用户密码长度必须介于 6 和 20 之间',
 			trigger: 'blur',
 		},
+		{
+			validator: (rule: any, value: any, callback: any) => {
+				if (Number(score.value) < 2) {
+					callback('密码强度太低');
+				}
+			},
+			trigger: 'blur',
+		},
 	],
 });
+const score = ref('0');
+
+const handlePassScore = (e) => {
+	score.value = e;
+};
 
 const handleRegister = () => {
 	loading.value = true;

src/views/login/index.vue

@@ -187,7 +187,7 @@ const signInSuccess = async () => {
 			border: 1px solid var(--el-color-primary-light-3);
 			border-radius: 3px;
 			width: 500px;
-			height: 500px;
+			height: 560px;
 			position: relative;
 			overflow: hidden;
 			background-color: var(--el-color-white);