antd+React.js实现登陆页面，登陆注册页面

今天制作登陆界面，本来想找开原的代码复制粘贴，但奈何网友们是在太过吝啬。找了半天，不如我来做这个开源。

代码如下（登陆界面层级都比较分明，故不再做过多解释）

import styles from './login.module.scss';
import { Button, Checkbox, Form, Input, Tabs } from 'antd';
import { UserOutlined, MedicineBoxOutlined, VerifiedOutlined, TabletOutlined } from '@ant-design/icons';
import type { TabsProps } from 'antd';
import React, { useState, useEffect } from 'react';
import Router from 'next/router';

const Login = () => {
  // 刷新验证码的函数
  const refreshCaptcha = () => {
    fetchCaptcha();
  };
  const [captcha, setCaptcha] = useState(null);

  const [sendButton, setSendButton] = useState('发送验证码');
  const [isSending, setIsSending] = useState(false);
  const [countdown, setCountdown] = useState(0);

  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (countdown > 0) {
      timer = setTimeout(() => {
        setCountdown(countdown - 1);
        setSendButton(`重新发送(${countdown - 1}s)`);
      }, 1000);
    } else if (countdown === 0 && isSending) {
      setIsSending(false);
      setSendButton('发送验证码');
    }

    return () => clearTimeout(timer);
  }, [countdown, isSending]);

  const sendCap = () => {
    setIsSending(true);
    setCountdown(60);
  };

  // 注册事件
  const [activeKey, setActiveKey] = useState('1');
  const [enrollText, setEnrollText] = useState('手机登录');
  const enroll = () => {
    setEnrollText('手机注册');
    setActiveKey('2'); // 切换到第二个选项卡
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '账号登录',
      children: (
        <>
          
            } allowClear />
          

          
            } type="password" placeholder="密码" allowClear />
          

          

            } allowClear />
            
          
          
            
              

                记住我
                
                  忘记密码
                
              
            
          

          
            登 录
          
          

            
或者
            
              注册
            
          
        
      ),
    },
    {
      key: '2',
      label: `${enrollText}`,
      children: (
        <>
          
            } allowClear />
          

          
            

              }
                allowClear
                placeholder="请输入验证码"
              />
              
                {sendButton}
              
            
          
          {enrollText === '手机注册' ? (
            <>
              
                } type="password" allowClear />
              
              
                } type="password" allowClear />
              
            
          ) : (
            <>
          )}

          
            登 录
          
        
      ),
    },
  ];
  const onChange = key => {
    key === '1' ? setEnrollText('手机登录') : console.log('当前激活的选项卡:', key);
    setActiveKey(key); // 更新当前激活的选项卡
  };

  async function fetchCaptcha() {
    try {
      const response = await fetch('/api/captcha'); // 使用相对路径
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      setCaptcha(data.imageSrc);
    } catch (error) {
      console.error('Error fetching captcha:', error);
    }
  }

  useEffect(() => {
    // fetchCaptcha();
  }, []);

  return (
    

      

        
个人管理基础信息平台 
        
      
    
  );
};

export default Login;

代码的显示效果是这样的

 我认为这个页面的特色还是有的，使用一个tabs标签实现两个点击按钮实现了三个和功能页面转换。其中图形验证码在业务上实际是由后端生成的。所以自行修改。

如果你认为它还能更好，请联系我。我们共同讨论！