Optimize code
This commit is contained in:
@@ -8,6 +8,7 @@ import {
|
||||
PERMISSION_ACCOUNT_NEED_INIT,
|
||||
PERMISSION_LOGIN_SUCCESS,
|
||||
PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
|
||||
PERMISSION_NO_VERIFICATION_REQUIRED,
|
||||
PERMISSION_REGISTER_SUCCESS,
|
||||
PERMISSION_USER_DISABLE,
|
||||
PERMISSION_USERNAME_NOT_FOUND
|
||||
@@ -201,7 +202,7 @@ const SignUp: React.FC = () => {
|
||||
</>
|
||||
) : (
|
||||
<div className={'retry'}>
|
||||
我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
|
||||
我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
|
||||
<a onClick={handleOnResend}>重新发送</a>
|
||||
</div>
|
||||
)}
|
||||
@@ -228,6 +229,7 @@ const Verify: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const [hasCode, setHasCode] = useState(true)
|
||||
const [needVerify, setNeedVerify] = useState(true)
|
||||
const [isValid, setIsValid] = useState(true)
|
||||
const [isSending, setIsSending] = useState(false)
|
||||
const [isGettingAvatar, setIsGettingAvatar] = useState(false)
|
||||
@@ -255,12 +257,18 @@ const Verify: React.FC = () => {
|
||||
void r_auth_verify({ code })
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
if (response.code === PERMISSION_ACCOUNT_NEED_INIT) {
|
||||
void getUserInfo().then((user) => {
|
||||
setAvatar(user.userInfo.avatar)
|
||||
})
|
||||
} else {
|
||||
setIsValid(false)
|
||||
switch (response.code) {
|
||||
case PERMISSION_ACCOUNT_NEED_INIT:
|
||||
void getUserInfo().then((user) => {
|
||||
setAvatar(user.userInfo.avatar)
|
||||
})
|
||||
break
|
||||
case PERMISSION_NO_VERIFICATION_REQUIRED:
|
||||
void message.success('无需验证')
|
||||
setNeedVerify(false)
|
||||
break
|
||||
default:
|
||||
setIsValid(false)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -347,7 +355,13 @@ const Verify: React.FC = () => {
|
||||
<div className={'secondary'}>Verify account</div>
|
||||
</div>
|
||||
<AntdForm className={'form'} onFinish={handleOnFinish}>
|
||||
<div className={'verify-process'} hidden={!hasCode || !isValid}>
|
||||
<div className={'no-verify-need'} hidden={needVerify}>
|
||||
账号已验证通过，无需验证，点击 <a href={'/'}>回到首页</a>
|
||||
</div>
|
||||
<div
|
||||
className={'verify-process'}
|
||||
hidden={!needVerify || !hasCode || !isValid}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -360,7 +374,7 @@ const Verify: React.FC = () => {
|
||||
src={
|
||||
<img
|
||||
src={`data:image/png;base64,${avatar}`}
|
||||
alt={'avatar'}
|
||||
alt={'Avatar'}
|
||||
/>
|
||||
}
|
||||
size={100}
|
||||
|
||||
@@ -6,6 +6,8 @@ import {
|
||||
TooltipComponentOption,
|
||||
GridComponent,
|
||||
GridComponentOption,
|
||||
LegendComponent,
|
||||
LegendComponentOption,
|
||||
ToolboxComponentOption,
|
||||
DataZoomComponentOption,
|
||||
ToolboxComponent,
|
||||
@@ -14,7 +16,7 @@ import {
|
||||
import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
|
||||
import { UniversalTransition } from 'echarts/features'
|
||||
import { SVGRenderer } from 'echarts/renderers'
|
||||
import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
|
||||
import { CallbackDataParams } from 'echarts/types/dist/shared'
|
||||
import '@/assets/css/pages/system/statistics.scss'
|
||||
import { useUpdatedEffect } from '@/util/hooks'
|
||||
import { formatByteSize } from '@/util/common'
|
||||
@@ -38,6 +40,7 @@ echarts.use([
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
DataZoomComponent,
|
||||
BarChart,
|
||||
LineChart,
|
||||
@@ -48,6 +51,7 @@ type EChartsOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| ToolboxComponentOption
|
||||
| GridComponentOption
|
||||
| LegendComponentOption
|
||||
| BarSeriesOption
|
||||
| DataZoomComponentOption
|
||||
| LineSeriesOption
|
||||
@@ -94,33 +98,26 @@ const barEChartsBaseOption: EChartsOption = {
|
||||
}
|
||||
|
||||
const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
|
||||
return (params: TopLevelFormatterParams) =>
|
||||
`${utcToLocalTime(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
|
||||
params[0].data[0],
|
||||
format
|
||||
)}<br><span style="display: flex; justify-content: space-between"><span>${
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
params[0]['marker']
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
}${params[0]['seriesName']}</span><span style="font-weight: bold">${
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
|
||||
params[0].data[1]
|
||||
}</span></span> `
|
||||
return (params: CallbackDataParams[]) =>
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
||||
`${utcToLocalTime(params[0].data[0], format)}<br>${params
|
||||
.map(
|
||||
(param) =>
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
|
||||
`<span style="display: flex; justify-content: space-between;"><span>${param.marker}${param.seriesName}</span><span style="font-weight: bold; margin-left: 16px;">${param.data[1]}</span></span>`
|
||||
)
|
||||
.join('')}`
|
||||
}
|
||||
|
||||
const lineEChartsBaseOption: EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
@@ -380,6 +377,19 @@ const ActiveInfo: React.FC = () => {
|
||||
)?.count ?? 0
|
||||
])
|
||||
: []
|
||||
const verifyList = data.verifyHistory.length
|
||||
? getTimesBetweenTwoTimes(
|
||||
data.verifyHistory[0].time,
|
||||
data.verifyHistory[data.verifyHistory.length - 1].time,
|
||||
'day'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.verifyHistory.find(
|
||||
(value) =>
|
||||
value.time.substring(0, 10) === time.substring(0, 10)
|
||||
)?.count ?? 0
|
||||
])
|
||||
: []
|
||||
|
||||
activeInfoEChartsRef.current = echarts.init(
|
||||
activeInfoDivRef.current,
|
||||
@@ -417,6 +427,14 @@ const ActiveInfo: React.FC = () => {
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: loginList
|
||||
},
|
||||
{
|
||||
name: '验证账号人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: verifyList
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -91,7 +91,7 @@ const User: React.FC = () => {
|
||||
<AntdImage
|
||||
preview={{ mask: <Icon component={IconFatwebEye}></Icon> }}
|
||||
src={`data:image/png;base64,${value}`}
|
||||
alt={'avatar'}
|
||||
alt={'Avatar'}
|
||||
/>
|
||||
}
|
||||
style={{ background: COLOR_BACKGROUND }}
|
||||
@@ -161,13 +161,21 @@ const User: React.FC = () => {
|
||||
</>
|
||||
}
|
||||
>
|
||||
{!record.locking &&
|
||||
{!record.verify &&
|
||||
!record.locking &&
|
||||
(!record.expiration || !isPastTime(record.expiration)) &&
|
||||
(!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
|
||||
record.enable ? (
|
||||
<AntdTag color={'green'}>正常</AntdTag>
|
||||
) : (
|
||||
<>
|
||||
{record.verify ? (
|
||||
<>
|
||||
<AntdPopover content={record.verify} trigger={'click'}>
|
||||
<AntdTag style={{ cursor: 'pointer' }}>未验证</AntdTag>
|
||||
</AntdPopover>
|
||||
</>
|
||||
) : undefined}
|
||||
{record.locking ? <AntdTag>锁定</AntdTag> : undefined}
|
||||
{record.expiration && isPastTime(record.expiration) ? (
|
||||
<AntdTag>过期</AntdTag>
|
||||
@@ -430,6 +438,7 @@ const User: React.FC = () => {
|
||||
form.setFieldValue('id', value.id)
|
||||
form.setFieldValue('username', value.username)
|
||||
form.setFieldValue('password', undefined)
|
||||
form.setFieldValue('verified', !value.verify?.length)
|
||||
form.setFieldValue('locking', value.locking)
|
||||
form.setFieldValue('expiration', value.expiration)
|
||||
form.setFieldValue('credentialsExpiration', value.credentialsExpiration)
|
||||
@@ -727,6 +736,7 @@ const User: React.FC = () => {
|
||||
if (!isDrawerEdit && formValues) {
|
||||
setNewFormValues({
|
||||
username: formValues.username,
|
||||
verified: formValues.verified,
|
||||
locking: formValues.locking,
|
||||
expiration: formValues.expiration,
|
||||
credentialsExpiration: formValues.credentialsExpiration,
|
||||
@@ -771,7 +781,7 @@ const User: React.FC = () => {
|
||||
src={`data:image/png;base64,${
|
||||
isDrawerEdit ? formValues?.avatar : avatar
|
||||
}`}
|
||||
alt={'avatar'}
|
||||
alt={'Avatar'}
|
||||
/>
|
||||
}
|
||||
size={100}
|
||||
@@ -840,6 +850,9 @@ const User: React.FC = () => {
|
||||
}))}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item name={'verified'} label={'已验证'}>
|
||||
<AntdSwitch />
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item
|
||||
valuePropName={'checked'}
|
||||
name={'locking'}
|
||||
|
||||
Reference in New Issue
Block a user