Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
maintain_service
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
刘帅
maintain_service
Commits
dcd9aa2d
Commit
dcd9aa2d
authored
Aug 22, 2025
by
刘帅
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1.修改密码优化,增加弱密码校验
2.登录页增加扫码下载APP二维码
parent
8e1c21c1
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
185 additions
and
3 deletions
+185
-3
qr.png
maintain-ui/src/assets/qr/qr.png
+0
-0
login.vue
maintain-ui/src/views/login.vue
+60
-1
resetPwd.vue
maintain-ui/src/views/system/user/profile/resetPwd.vue
+125
-2
No files found.
maintain-ui/src/assets/qr/qr.png
0 → 100644
View file @
dcd9aa2d
2.79 KB
maintain-ui/src/views/login.vue
View file @
dcd9aa2d
...
...
@@ -54,9 +54,21 @@
</div>
</el-form-item>
</el-form>
<!-- 右下角二维码展示框 -->
<div
class=
"qr-code-container"
>
<div
class=
"qr-code-box"
>
<div
class=
"qr-code-title"
>
扫码下载APP
</div>
<div
class=
"qr-code-image"
>
<!-- 这里可以替换为实际的二维码图片 -->
<img
src=
"../assets/qr/qr.png"
alt=
"APP下载二维码"
>
</div>
</div>
</div>
<!-- 底部 -->
<div
class=
"el-login-footer"
>
<!--
<span>
Copyright © 2018-2023 All Rights Reserved.
</span>
-->
<!--
<span>
Copyright © 2018-2023 All Rights Reserved.
</span>
-->
</div>
</div>
</
template
>
...
...
@@ -163,6 +175,7 @@ export default {
height
:
100%
;
background-image
:
url("../assets/images/login-background.jpg")
;
background-size
:
cover
;
position
:
relative
;
}
.title
{
margin
:
0px
auto
30px
auto
;
...
...
@@ -216,4 +229,50 @@ export default {
.login-code-img
{
height
:
38px
;
}
/* 右下角二维码样式 */
.qr-code-container
{
position
:
fixed
;
right
:
20px
;
bottom
:
60px
;
z-index
:
100
;
}
.qr-code-box
{
width
:
140px
;
padding
:
12px
;
background
:
rgba
(
255
,
255
,
255
,
0
.9
);
border-radius
:
8px
;
box-shadow
:
0
2px
12px
0
rgba
(
0
,
0
,
0
,
0
.1
);
text-align
:
center
;
}
.qr-code-title
{
font-size
:
14px
;
font-weight
:
bold
;
margin-bottom
:
8px
;
color
:
#333
;
}
.qr-code-image
{
width
:
100px
;
height
:
100px
;
margin
:
0
auto
;
background-color
:
#f5f5f5
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
border
:
1px
solid
#eaeaea
;
img
{
max-width
:
100%
;
max-height
:
100%
;
}
}
.qr-code-text
{
font-size
:
12px
;
color
:
#666
;
margin-top
:
8px
;
}
</
style
>
maintain-ui/src/views/system/user/profile/resetPwd.vue
View file @
dcd9aa2d
...
...
@@ -4,7 +4,16 @@
<el-input
v-model=
"user.oldPassword"
placeholder=
"请输入旧密码"
type=
"password"
show-password
/>
</el-form-item>
<el-form-item
label=
"新密码"
prop=
"newPassword"
>
<el-input
v-model=
"user.newPassword"
placeholder=
"请输入新密码"
type=
"password"
show-password
/>
<el-input
v-model=
"user.newPassword"
placeholder=
"请输入新密码"
type=
"password"
show-password
@
input=
"checkPasswordStrength"
/>
<div
v-if=
"user.newPassword"
class=
"password-strength"
>
<div
:class=
"['strength-bar', strengthClass]"
></div>
</div>
<div
v-if=
"user.newPassword"
class=
"password-tips"
>
密码强度:
{{
strengthText
}}
<div
v-if=
"user.newPassword && !isPasswordStrong"
class=
"weak-password-tips"
>
密码必须包含大写字母、小写字母、数字和特殊字符
</div>
</div>
</el-form-item>
<el-form-item
label=
"确认密码"
prop=
"confirmPassword"
>
<el-input
v-model=
"user.confirmPassword"
placeholder=
"请确认新密码"
type=
"password"
show-password
/>
...
...
@@ -21,6 +30,27 @@ import { updateUserPwd } from "@/api/system/user";
export
default
{
data
()
{
// 验证密码复杂度
const
validatePasswordComplexity
=
(
rule
,
value
,
callback
)
=>
{
if
(
!
value
)
{
callback
(
new
Error
(
"
新密码不能为空
"
));
return
;
}
// 检查密码复杂度
const
hasLowerCase
=
/
[
a-z
]
/
.
test
(
value
);
const
hasUpperCase
=
/
[
A-Z
]
/
.
test
(
value
);
const
hasNumber
=
/
[
0-9
]
/
.
test
(
value
);
const
hasSpecialChar
=
/
[
!@#$%^&*()_+
\-
=
\[\]
{};':"
\\
|,.<>
\/
?
]
/
.
test
(
value
);
if
(
!
hasLowerCase
||
!
hasUpperCase
||
!
hasNumber
||
!
hasSpecialChar
)
{
callback
(
new
Error
(
"
密码必须包含大小写字母、数字和特殊字符
"
));
return
;
}
callback
();
};
const
equalToPassword
=
(
rule
,
value
,
callback
)
=>
{
if
(
this
.
user
.
newPassword
!==
value
)
{
callback
(
new
Error
(
"
两次输入的密码不一致
"
));
...
...
@@ -28,12 +58,16 @@ export default {
callback
();
}
};
return
{
user
:
{
oldPassword
:
undefined
,
newPassword
:
undefined
,
confirmPassword
:
undefined
},
strengthClass
:
'
weak
'
,
strengthText
:
'
弱
'
,
isPasswordStrong
:
false
,
// 表单校验
rules
:
{
oldPassword
:
[
...
...
@@ -41,7 +75,8 @@ export default {
],
newPassword
:
[
{
required
:
true
,
message
:
"
新密码不能为空
"
,
trigger
:
"
blur
"
},
{
min
:
6
,
max
:
20
,
message
:
"
长度在 6 到 20 个字符
"
,
trigger
:
"
blur
"
}
{
min
:
8
,
message
:
"
密码长度至少为8个字符
"
,
trigger
:
"
blur
"
},
{
validator
:
validatePasswordComplexity
,
trigger
:
"
blur
"
}
],
confirmPassword
:
[
{
required
:
true
,
message
:
"
确认密码不能为空
"
,
trigger
:
"
blur
"
},
...
...
@@ -51,9 +86,56 @@ export default {
};
},
methods
:
{
// 检查密码强度
checkPasswordStrength
()
{
if
(
!
this
.
user
.
newPassword
)
{
this
.
strengthClass
=
'
weak
'
;
this
.
strengthText
=
'
弱
'
;
this
.
isPasswordStrong
=
false
;
return
;
}
let
strength
=
0
;
// 长度检查
if
(
this
.
user
.
newPassword
.
length
>=
8
)
strength
++
;
// 包含小写字母
if
(
/
[
a-z
]
/
.
test
(
this
.
user
.
newPassword
))
strength
++
;
// 包含大写字母
if
(
/
[
A-Z
]
/
.
test
(
this
.
user
.
newPassword
))
strength
++
;
// 包含数字
if
(
/
[
0-9
]
/
.
test
(
this
.
user
.
newPassword
))
strength
++
;
// 包含特殊字符
if
(
/
[
!@#$%^&*()_+
\-
=
\[\]
{};':"
\\
|,.<>
\/
?
]
/
.
test
(
this
.
user
.
newPassword
))
strength
++
;
// 设置强度等级
if
(
strength
<=
2
)
{
this
.
strengthClass
=
'
weak
'
;
this
.
strengthText
=
'
弱
'
;
this
.
isPasswordStrong
=
false
;
}
else
if
(
strength
<=
4
)
{
this
.
strengthClass
=
'
medium
'
;
this
.
strengthText
=
'
中
'
;
this
.
isPasswordStrong
=
false
;
}
else
{
this
.
strengthClass
=
'
strong
'
;
this
.
strengthText
=
'
强
'
;
this
.
isPasswordStrong
=
true
;
}
},
submit
()
{
this
.
$refs
[
"
form
"
].
validate
(
valid
=>
{
if
(
valid
)
{
// 再次确认密码强度
if
(
!
this
.
isPasswordStrong
)
{
this
.
$message
.
error
(
"
密码强度不足,请确保包含大小写字母、数字和特殊字符
"
);
return
;
}
updateUserPwd
(
this
.
user
.
oldPassword
,
this
.
user
.
newPassword
).
then
(
response
=>
{
this
.
$modal
.
msgSuccess
(
"
修改成功
"
);
});
...
...
@@ -66,3 +148,44 @@ export default {
}
};
</
script
>
<
style
scoped
>
.password-strength
{
height
:
6px
;
margin-top
:
8px
;
background
:
#eee
;
border-radius
:
3px
;
overflow
:
hidden
;
}
.strength-bar
{
height
:
100%
;
transition
:
all
0.3s
ease
;
}
.strength-bar.weak
{
width
:
33%
;
background
:
#f56c6c
;
}
.strength-bar.medium
{
width
:
66%
;
background
:
#e6a23c
;
}
.strength-bar.strong
{
width
:
100%
;
background
:
#67c23a
;
}
.password-tips
{
font-size
:
12px
;
color
:
#909399
;
margin-top
:
6px
;
}
.weak-password-tips
{
color
:
#f56c6c
;
margin-top
:
4px
;
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment