Browse Source

add login function

dev
powersir 1 year ago
parent
commit
be8c270a8b
7 changed files with 49 additions and 31 deletions
  1. +4
    -9
      src/layout/header/index.tsx
  2. +13
    -0
      src/models/index.ts
  3. +22
    -10
      src/pages/login/index.tsx
  4. +8
    -0
      src/request/service/home.ts
  5. +1
    -1
      src/request/service/login.ts
  6. +0
    -10
      src/store/global/index.ts
  7. +1
    -1
      src/store/global/user.ts

+ 4
- 9
src/layout/header/index.tsx View File

@@ -32,11 +32,6 @@ const Header = () => {
const logout = async () => {
const [error] = await runAsync();
if (error) return;

useGlobalStore.setState({
token: '',
refreshToken: ''
});
}

return (
@@ -140,13 +135,13 @@ const Header = () => {
>
<div className='p-[16px]'>
<p className='text-[16px] dark:text-[rgb(237,242,247)] text-[rgb(17,25,39)] '>
{currentUser?.nickName}
{currentUser?.userName}
</p>
<p className='text-[rgb(108,115,127)] dark:text-[rgb(160,174,192)] mt-[10px]'>
{currentUser?.phoneNumber}
</p>
<p className='text-[rgb(108,115,127)] dark:text-[rgb(160,174,192)] mt-[0px]'>
{currentUser?.email}
{currentUser?.emailAddress}
</p>
</div>
<hr style={{ borderWidth: '0 0 thin' }} className='m-[0] border-solid dark:border-[rgb(45,55,72)] border-[rgb(242,244,247)]' />
@@ -158,8 +153,8 @@ const Header = () => {
}}
>
<div className='btn-icon rounded-[27px] pl-[10px] pr-[14px] justify-between h-[48px] w-[92px] text-[20px] bg-[rgb(227,242,253)] text-[rgb(30,136,229)] hover:(bg-[rgb(33,150,243)] text-[rgb(227,242,253)])'>
{currentUser?.avatarPath ? (
<Avatar style={{ verticalAlign: 'middle' }} src={currentUser.avatarPath} />
{currentUser?.avatarUrl ? (
<Avatar style={{ verticalAlign: 'middle' }} src={currentUser.avatarUrl} />
) : (
<Avatar style={{ backgroundColor: 'gold', verticalAlign: 'middle' }} icon={<IconBuguang />} />
)}


+ 13
- 0
src/models/index.ts View File

@@ -4,3 +4,16 @@ export interface PageData<T> {
data: T[];
total: number;
}


export interface Announcement {
id: number,
name: string,
detail: string,
expiryTime: string,
roleId: number,
flag: number,
createTime: string,
createOperId: number,
top: number
}

+ 22
- 10
src/pages/login/index.tsx View File

@@ -1,14 +1,26 @@
import { t } from '@/utils/i18n';
import { IconBuguang } from '@/assets/icons/buguang'
import { IconBuguang } from '@/assets/icons/buguang';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Carousel } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useRequest } from '@/hooks/use-request';
import { useUserStore } from '@/store/global/user';
import loginService from '@/request/service/login';
import { LoginDTO } from '@/models';
import './index.css'

const Login = () => {
const navigate = useNavigate();

const onFinish = async () => {
const { runAsync: login, loading } = useRequest(loginService.login, { manual: true });
const { setCurrentUser } = useUserStore();
const onFinish = async (values: LoginDTO) => {
const [loginError, data] = await login(values);
if (loginError) {
return;
}
data.data.avatarUrl = 'https://test.vogocm.com:9010/eshop/eshop_img/2023/5/24/43853633d16749bfb291f81bebb73451_20230524150631A001.jpg'
setCurrentUser(data.data);
navigate('/');
};

@@ -22,7 +34,7 @@ const Login = () => {
<h1 className='dark:(text-white) ' style={{ marginBottom: '0.2em' }}> 旺嘉-ERP Admin</h1>
</div>
<h3 className='dark:(text-white) text-[rgba(0,0,0,.45)] mb-[1em] text-[14px] font-normal'>
{t("wbTMzvDM" /* 一个高颜值后台管理系统 */)}
{t("wbTMzvDM" /* 旺嘉-ERP后台管理系统 */)}
</h3>
</div>
<Form
@@ -70,7 +82,7 @@ const Login = () => {
<Form.Item style={{ marginBottom: 18 }}>
<Button
type="primary"
loading={false}
loading={loading}
block
htmlType='submit'
>
@@ -106,10 +118,10 @@ const Login = () => {
<div className='h-[160px] bg-transparent flex items-center justify-center'>
<div>
<h3 className='dark:text-[rgb(215,220,236)] text-[rgb(18,25,38)] text-[34px]'>
fluxy-admin
vogocm-admin
</h3>
<div className='dark:text-[rgb(132,146,196)] text-[rgb(105,117,134)] text-[12px] my-[20px] '>
一个高颜值后台管理系统
vogocm后台管理系统
</div>
</div>
</div>
@@ -118,10 +130,10 @@ const Login = () => {
<div className='h-[160px] bg-transparent flex items-center justify-center'>
<div>
<h3 className='dark:text-[rgb(215,220,236)] text-[rgb(18,25,38)] text-[34px]'>
fluxy-admin
vogocm-admin
</h3>
<div className='dark:text-[rgb(132,146,196)] text-[rgb(105,117,134)] text-[12px] my-[20px]'>
一个高颜值后台管理系统
vogocm后台管理系统
</div>
</div>
</div>
@@ -130,10 +142,10 @@ const Login = () => {
<div className='h-[160px] bg-transparent flex items-center justify-center'>
<div>
<h3 className='dark:text-[rgb(215,220,236)] text-[rgb(18,25,38)] text-[34px]'>
fluxy-admin
vogocm-admin
</h3>
<div className='dark:text-[rgb(132,146,196)] text-[rgb(105,117,134)] text-[12px] my-[20px] '>
一个高颜值后台管理系统
vogocm后台管理系统
</div>
</div>
</div>


+ 8
- 0
src/request/service/home.ts View File

@@ -0,0 +1,8 @@
import request from '@/request';
import { Announcement } from '@/models'

export default {
getAnnouncement: () => {
return request.get<Announcement>('/api/index/getNotice');
}
};

+ 1
- 1
src/request/service/login.ts View File

@@ -8,7 +8,7 @@ const loginService = {
},

logout: () => {
return request.get<LoginRespDTO>('/api/logout');
return request.get<any>('/api/logout');
}
};



+ 0
- 10
src/store/global/index.ts View File

@@ -5,16 +5,12 @@ interface State {
darkMode: boolean;
collapsed: boolean;
lang: string;
token: string;
refreshToken: string;
}

interface Action {
setDarkMode: (darkMode: State['darkMode']) => void;
setCollapsed: (collapsed: State['collapsed']) => void;
setLang: (lang: State['lang']) => void;
setToken: (lang: State['token']) => void;
setRefreshToken: (lang: State['refreshToken']) => void;
}

export const useGlobalStore = create<State & Action>()(
@@ -35,12 +31,6 @@ export const useGlobalStore = create<State & Action>()(
setLang: (lang: State['lang']) => set({
lang,
}),
setToken: (token: State['token']) => set({
token,
}),
setRefreshToken: (refreshToken: State['refreshToken']) => set({
refreshToken,
}),
};
},
{


+ 1
- 1
src/store/global/user.ts View File

@@ -1,4 +1,4 @@
import { UserDTO } from '@/models/user';
import { UserDTO } from '@/models';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';



Loading…
Cancel
Save