Optimize code

2023-12-25 17:54:31 +08:00
parent 27a41944c6
commit 6510567fdf
9 changed files with 119 additions and 39 deletions
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -186,14 +186,19 @@
      justify-content: center;
      align-items: center;
      margin-left: 4px;
-      padding: 10px;
      width: 36px;
      height: 36px;
      font-size: constants.$SIZE_ICON_XS;
      border: 2px constants.$font-secondary-color solid;
      color: constants.$font-secondary-color;
      border-radius: 50%;
+      overflow: hidden;
      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
    }

    .text {
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -91,6 +91,13 @@
        }
      }

+      .verify {
+        a {
+          color: constants.$production-color;
+          font-weight: bolder;
+        }
+      }
+
      .sign-up, .sign-in, .forget {
        .footer {
          a {
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -433,6 +433,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
    }

    useEffect(() => {
+        setTimeout(() => {
+            reloadScrollbar()
+        }, 500)
        const resizeObserver = new ResizeObserver(() => {
            reloadScrollbar()
        })
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
-import { getLoginStatus, getNickname, removeToken } from '@/util/auth'
+import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'

 const SidebarFooter: React.FC = () => {
@@ -12,6 +12,7 @@ const SidebarFooter: React.FC = () => {
    const navigate = useNavigate()
    const [exiting, setExiting] = useState(false)
    const [nickname, setNickname] = useState('')
+    const [avatar, setAvatar] = useState('')

    const handleClickAvatar = () => {
        if (getLoginStatus()) {
@@ -45,6 +46,10 @@ const SidebarFooter: React.FC = () => {
        if (getLoginStatus()) {
            void getNickname().then((nickname) => {
                setNickname(nickname)
+
+                void getAvatar().then((avatar) => {
+                    setAvatar(`data:image/png;base64,${avatar}`)
+                })
            })
        }
    }, [loginStatus])
@@ -56,7 +61,11 @@ const SidebarFooter: React.FC = () => {
                onClick={handleClickAvatar}
                title={getLoginStatus() ? '个人中心' : '登录'}
            >
-                <Icon component={IconFatwebUser} />
+                {avatar ? (
+                    <img src={avatar} alt={'Avatar'} />
+                ) : (
+                    <Icon viewBox={'-20 0 1024 1024'} component={IconFatwebUser} />
+                )}
            </span>
            <span hidden={getLoginStatus()} className={'text'}>
                未
@@ -64,7 +73,7 @@ const SidebarFooter: React.FC = () => {
                    登录
                </NavLink>
            </span>
-            <span hidden={!getLoginStatus()} className={'text'}>
+            <span hidden={!getLoginStatus()} className={'text'} title={nickname}>
                {nickname}
            </span>
            <div
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -199,6 +199,7 @@ interface UserAddEditParam {
    id?: string
    username: string
    password?: string
+    verified: boolean
    locking?: boolean
    expiration?: string
    credentialsExpiration?: string
@@ -413,6 +414,10 @@ interface ActiveInfoVo {
        time: string
        count: number
    }[]
+    verifyHistory: {
+        time: string
+        count: number
+    }[]
 }

 interface ActiveInfoGetParam {
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -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,11 +257,17 @@ const Verify: React.FC = () => {
        void r_auth_verify({ code })
            .then((res) => {
                const response = res.data
-                if (response.code === PERMISSION_ACCOUNT_NEED_INIT) {
+                switch (response.code) {
+                    case PERMISSION_ACCOUNT_NEED_INIT:
                        void getUserInfo().then((user) => {
                            setAvatar(user.userInfo.avatar)
                        })
-                } else {
+                        break
+                    case PERMISSION_NO_VERIFICATION_REQUIRED:
+                        void message.success('无需验证')
+                        setNeedVerify(false)
+                        break
+                    default:
                        setIsValid(false)
                }
            })
@@ -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}>
+                                账号已验证通过，无需验证，点击&nbsp;<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}
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -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(
+    return (params: CallbackDataParams[]) =>
        // 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/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/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> `
+                    // 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
                                }
                            ]
                        })
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -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'}
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -112,6 +112,12 @@ export const getNickname = async () => {
    return user.userInfo.nickname
 }

+export const getAvatar = async () => {
+    const user = await getUserInfo()
+
+    return user.userInfo.avatar
+}
+
 export const getUsername = async () => {
    const user = await getUserInfo()