1

src/pages/user/login/index.jsx

@@ -1,218 +0,0 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Alert, message, Tabs } from 'antd'
-import React, { useState } from 'react'
-import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
-import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi'
-
-import styles from './index.less'
-import { apiLogin } from '@/services/login'
-import { setAuthCache } from '@/utils/auth'
-import { TOKEN_KEY } from '@/utils/cache/cacheEnum'
-import { DEFAULT_CACHE_TIME } from '@/settings/encryptionSetting'
-
-const LoginMessage = ({ content }) => (
-  <Alert
-    style={{
-      marginBottom: 24
-    }}
-    message={content}
-    type="error"
-    showIcon
-  />
-)
-
-/** 此方法会跳转到 redirect 参数所在的位置 */
-const goto = () => {
-  if (!history) return
-  setTimeout(() => {
-    const { query } = history.location
-    const { redirect } = query
-    history.push(redirect || '/')
-  }, 10)
-}
-
-const Login = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [userLoginState, setUserLoginState] = useState({})
-  const [type, setType] = useState('account')
-  const { initialState, setInitialState } = useModel('@@initialState')
-
-  const intl = useIntl()
-
-  const fetchUserInfo = async () => {
-    const userInfo = await initialState?.fetchUserInfo?.()
-    const permData = await initialState?.fetchPermData?.()
-    if (userInfo) {
-      setInitialState({ ...initialState, ...userInfo, permData })
-      // const { username, staffId: id, wsToken: token } = userInfo?.currentUser
-      // ws.init(`ws://cld2qa.com/summon/v1/chat/link?username=${username}&id=${id}&token=${token}`, {
-      //   onMessage
-      // })
-    }
-  }
-
-  const handleSubmit = async values => {
-    setSubmitting(true)
-    try {
-      // 登录
-      const res = await apiLogin({ ...values })
-      if (res.code === 0) {
-        setAuthCache(TOKEN_KEY, res.data.token, DEFAULT_CACHE_TIME)
-
-        const defaultLoginSuccessMessage = intl.formatMessage({
-          id: 'pages.login.success',
-          defaultMessage: '登录成功！'
-        })
-        message.success(defaultLoginSuccessMessage)
-        await fetchUserInfo()
-        /** 此方法会跳转到 redirect 参数所在的位置 */
-        return goto()
-      }
-      // 如果失败去设置用户错误信息
-      setUserLoginState(res.msg)
-    } catch (error) {
-      const defaultLoginFailureMessage = intl.formatMessage({
-        id: 'pages.login.failure',
-        defaultMessage: '登录失败，请重试！'
-      })
-
-      return message.error(defaultLoginFailureMessage)
-    }
-    return setSubmitting(false)
-  }
-  const { status, type: loginType } = userLoginState
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.lang} data-lang>
-        {SelectLang && <SelectLang />}
-      </div>
-      <div className={styles.content}>
-        <div className={styles.top}>
-          <div className={styles.header}>
-            <Link to="/" className="flex justify-center">
-              <img alt="logo" className={styles.logo} src="/logo.svg" />
-              <span className={styles.title}>CLD.V2</span>
-            </Link>
-          </div>
-          <div className={styles.desc}>
-            {intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
-          </div>
-        </div>
-
-        <div className={styles.main}>
-          <ProForm
-            initialValues={{
-              autoLogin: true
-            }}
-            submitter={{
-              searchConfig: {
-                submitText: intl.formatMessage({
-                  id: 'pages.login.submit',
-                  defaultMessage: '登录'
-                })
-              },
-              render: (_, dom) => dom.pop(),
-              submitButtonProps: {
-                loading: submitting,
-                size: 'large',
-                style: {
-                  width: '100%'
-                }
-              }
-            }}
-            onFinish={async values => {
-              handleSubmit(values)
-            }}
-          >
-            <Tabs activeKey={type} onChange={setType}>
-              <Tabs.TabPane
-                key="account"
-                tab={intl.formatMessage({
-                  id: 'pages.login.accountLogin.tab',
-                  defaultMessage: '账户密码登录'
-                })}
-              />
-              {/* <Tabs.TabPane
-                key="mobile"
-                tab={intl.formatMessage({
-                  id: 'pages.login.phoneLogin.tab',
-                  defaultMessage: '手机号登录',
-                })}
-              /> */}
-            </Tabs>
-
-            {status === 'error' && loginType === 'account' && (
-              <LoginMessage
-                content={intl.formatMessage({
-                  id: 'pages.login.accountLogin.errorMessage',
-                  defaultMessage: '账户或密码错误'
-                })}
-              />
-            )}
-            {type === 'account' && (
-              <>
-                <ProFormText
-                  name="username"
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <UserOutlined className={styles.prefixIcon} />
-                  }}
-                  placeholder="用户名"
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.username.required"
-                          defaultMessage="请输入用户名!"
-                        />
-                      )
-                    }
-                  ]}
-                />
-                <ProFormText.Password
-                  name="password"
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <LockOutlined className={styles.prefixIcon} />
-                  }}
-                  placeholder="密码"
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.password.required"
-                          defaultMessage="请输入密码！"
-                        />
-                      )
-                    }
-                  ]}
-                />
-              </>
-            )}
-            <div
-              style={{
-                marginBottom: 24
-              }}
-            >
-              <ProFormCheckbox noStyle name="autoLogin">
-                <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
-              </ProFormCheckbox>
-              <a
-                style={{
-                  float: 'right'
-                }}
-              >
-                <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
-              </a>
-            </div>
-          </ProForm>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Login

src/pages/user/login/index.less

@@ -1,114 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: auto;
-  background: @layout-body-background;
-}
-
-.lang {
-  width: 100%;
-  height: 40px;
-  line-height: 44px;
-  text-align: right;
-  :global(.ant-dropdown-trigger) {
-    margin-right: 24px;
-  }
-}
-
-.content {
-  flex: 1;
-  padding: 32px 0;
-}
-
-@media (min-width: @screen-md-min) {
-  .container {
-    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-    background-repeat: no-repeat;
-    background-position: center 110px;
-    background-size: 100%;
-  }
-
-  .content {
-    padding: 32px 0 24px;
-  }
-}
-
-.top {
-  text-align: center;
-}
-
-.header {
-  height: 44px;
-  line-height: 44px;
-  a {
-    text-decoration: none;
-  }
-}
-
-.logo {
-  height: 44px;
-  margin-right: 16px;
-  vertical-align: top;
-}
-
-.title {
-  position: relative;
-  top: 2px;
-  color: @heading-color;
-  font-weight: 600;
-  font-size: 33px;
-  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-}
-
-.desc {
-  margin-top: 12px;
-  margin-bottom: 40px;
-  color: @text-color-secondary;
-  font-size: @font-size-base;
-}
-
-.main {
-  width: 328px;
-  margin: 0 auto;
-  @media screen and (max-width: @screen-sm) {
-    width: 95%;
-    max-width: 328px;
-  }
-
-  :global {
-    .@{ant-prefix}-tabs-nav-list {
-      margin: auto;
-      font-size: 16px;
-    }
-  }
-
-  .icon {
-    margin-left: 16px;
-    color: rgba(0, 0, 0, 0.2);
-    font-size: 24px;
-    vertical-align: middle;
-    cursor: pointer;
-    transition: color 0.3s;
-
-    &:hover {
-      color: @primary-color;
-    }
-  }
-
-  .other {
-    margin-top: 24px;
-    line-height: 22px;
-    text-align: left;
-    .register {
-      float: right;
-    }
-  }
-
-  .prefixIcon {
-    color: @primary-color;
-    font-size: @font-size-base;
-  }
-}