82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import clsx from 'clsx';
|
|
import LogoBannerH from '@/assets/logo-baner-h.png';
|
|
|
|
import { Beian } from '@/modules/beian/beian';
|
|
import { useUserStore } from '../store';
|
|
import { useShallow } from 'zustand/shallow';
|
|
import { useEffect } from 'react';
|
|
type Props = {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
export const Layout = (props: Props) => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'w-full h-full sm:bg-amber-100 flex sm:items-center sm:justify-center justify-normal items-start relative overflow-hidden',
|
|
props?.className,
|
|
)}>
|
|
<div className='w-full h-full overflow-scroll sm:overflow-hidden sm:scrollbar flex sm:items-center sm:justify-center'>{props.children}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MainLayout = (props: Props) => {
|
|
const config = useUserStore((state) => state.config);
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'login-main w-[450px] min-h-[660px] bg-white mt-10 sm:mt-0 sm:shadow-lg rounded-md flex items-center flex-col relative ',
|
|
props?.className,
|
|
)}>
|
|
{props.children}
|
|
<p className='mt-5 text-xs text-center text-[#e69c36]'>
|
|
登录即表示同意 <span className='font-medium text-[#e69c36]'>服务条款</span> 和 <span className='font-medium text-[#e69c36]'>隐私政策</span>
|
|
</p>
|
|
<Beian className=' mb-4' text={config?.beian} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const LoginWrapper = (props: Props) => {
|
|
const config = useUserStore((state) => state.config);
|
|
const loginWay = config?.loginWay || ['account'];
|
|
const store = useUserStore(
|
|
useShallow((state) => {
|
|
return {
|
|
loginByWechat: state.loginByWechat,
|
|
};
|
|
}),
|
|
);
|
|
const checkWechat = () => {
|
|
const url = new URL(window.location.href);
|
|
const code = url.searchParams.get('code');
|
|
const state = url.searchParams.get('state');
|
|
if (code && state) {
|
|
store.loginByWechat(code);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
checkWechat();
|
|
}, []);
|
|
return (
|
|
<Layout>
|
|
<MainLayout className=''>
|
|
<div
|
|
className='mt-4'
|
|
style={{
|
|
width: '90px',
|
|
height: '90px',
|
|
overflow: 'hidden',
|
|
...config?.logoStyle,
|
|
}}>
|
|
<img src={config?.logo || LogoBannerH} />
|
|
</div>
|
|
<div className='mt-4 text-[#F39800] font-bold text-xl'>欢迎回来</div>
|
|
{loginWay.length > 1 && <div className='text-sm text-yellow-400 mt-2'>请选择登陆方式</div>}
|
|
<div>{props.children}</div>
|
|
</MainLayout>
|
|
</Layout>
|
|
);
|
|
};
|