Commit 232e6205 authored by littleforest's avatar littleforest
parents 4cbcf488 68dbacb0
/** /**
* @see https://umijs.org/zh-CN/plugins/plugin-access * @see https://umijs.org/zh-CN/plugins/plugin-access
* */ * */
export default function access(initialState: { userInfo: { token: '' }; }) { export default function access(initialState: {
console.log('initialState', initialState) userInfo: { token: ''; roles: []; name: ''; userName: '' };
const { token } = initialState.userInfo ?? {}; }) {
return { console.log('initialState', initialState);
token return initialState.userInfo ?? {};
};
} }
...@@ -2,8 +2,9 @@ import styles from './index.less'; ...@@ -2,8 +2,9 @@ import styles from './index.less';
import { Button, Checkbox, Form, Input, Modal } from 'antd'; import { Button, Checkbox, Form, Input, Modal } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { LockOutlined, UserOutlined } from '@ant-design/icons';
import logoSvg from '../../assets/logo.svg'; import logoSvg from '../../assets/logo.svg';
import { useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { loginChatGLM } from '@/services/chatGLM/api'; import { loginChatGLM } from '@/services/chatGLM/api';
import { useModel } from 'umi';
interface ILoginModalProps { interface ILoginModalProps {
open: boolean; open: boolean;
setOpen: (value: boolean) => void; setOpen: (value: boolean) => void;
...@@ -11,14 +12,28 @@ interface ILoginModalProps { ...@@ -11,14 +12,28 @@ interface ILoginModalProps {
const LoginModal = (props: ILoginModalProps) => { const LoginModal = (props: ILoginModalProps) => {
const { open, setOpen } = props; const { open, setOpen } = props;
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { initialState, setInitialState } = useModel('@@initialState');
const [form] = Form.useForm(); const [form] = Form.useForm();
const submitRef = useRef<HTMLButtonElement>(null);
const reset = () => { const reset = () => {
setOpen(false); setOpen(false);
form.resetFields(); form.resetFields();
}; };
useEffect(() => {
if (open) {
const account = localStorage.getItem('account');
localStorage.removeItem('account');
if (account) {
setTimeout(() => {
submitRef.current?.click();
}, 300);
}
}
}, [open]);
const handleSubmit = async (values: any) => { const handleSubmit = async (values: any) => {
setLoading(true); setLoading(true);
...@@ -28,14 +43,23 @@ const LoginModal = (props: ILoginModalProps) => { ...@@ -28,14 +43,23 @@ const LoginModal = (props: ILoginModalProps) => {
name: username, name: username,
password, password,
}); });
if (checked) {
localStorage.setItem('account', JSON.stringify({ username, password, checked }));
}
setInitialState({ ...initialState, userInfo: result });
localStorage.setItem('user', JSON.stringify(result)); localStorage.setItem('user', JSON.stringify(result));
setLoading(false); setLoading(false);
reset(); reset();
} catch(error) { } catch (error) {
setLoading(false); setLoading(false);
} }
}; };
function getAccount() {
const account = localStorage.getItem('account');
return JSON.parse(account || JSON.stringify({ username: '', password: '', checked: false }));
}
return ( return (
<Modal <Modal
open={open} open={open}
...@@ -57,31 +81,28 @@ const LoginModal = (props: ILoginModalProps) => { ...@@ -57,31 +81,28 @@ const LoginModal = (props: ILoginModalProps) => {
</div> </div>
<p className={styles.modal_tip}>账户密码登录</p> <p className={styles.modal_tip}>账户密码登录</p>
<Form <Form
initialValues={getAccount()}
name="normal_login" name="normal_login"
initialValues={{ remember: true }}
onFinish={handleSubmit} onFinish={handleSubmit}
onValuesChange={(value) => {
console.log(value);
}}
className={styles.modal_form} className={styles.modal_form}
> >
<Form.Item <Form.Item name="username" rules={[{ required: true, message: '请输入你的账户!' }]}>
name="username" <Input prefix={<UserOutlined />} placeholder="账户" value={''} />
rules={[{ required: true, message: '请输入你的账户!' }]}
>
<Input prefix={<UserOutlined />} placeholder="账户" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item name="password" rules={[{ required: true, message: '请输入你的密码!' }]}>
name="password" <Input prefix={<LockOutlined />} type="password" placeholder="密码" value={''} />
rules={[{ required: true, message: '请输入你的密码!' }]}
>
<Input prefix={<LockOutlined />} type="password" placeholder="密码" />
</Form.Item> </Form.Item>
<Form.Item name="remember" valuePropName="checked" className={styles.modal_checked}> <Form.Item name="checked" valuePropName="checked" className={styles.modal_checked}>
<Checkbox>自动登录</Checkbox> <Checkbox>自动登录</Checkbox>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" htmlType="submit" className={styles.modal_button} loading={loading}> <Button
ref={submitRef}
type="primary"
htmlType="submit"
className={styles.modal_button}
loading={loading}
>
登录 登录
</Button> </Button>
</Form.Item> </Form.Item>
......
...@@ -19,6 +19,7 @@ import NewSession from '@/components/newSession'; ...@@ -19,6 +19,7 @@ import NewSession from '@/components/newSession';
import { useWebSocket, useRequest } from 'ahooks'; import { useWebSocket, useRequest } from 'ahooks';
import { GetChatGLMToken, GetPromptList } from '@/services/chatGLM/api'; import { GetChatGLMToken, GetPromptList } from '@/services/chatGLM/api';
import { useAccess } from 'umi'; import { useAccess } from 'umi';
import { PageLoading } from '@ant-design/pro-layout';
const { useBreakpoint } = Grid; const { useBreakpoint } = Grid;
const { Title } = Typography; const { Title } = Typography;
...@@ -36,15 +37,16 @@ const Chat: React.FC = () => { ...@@ -36,15 +37,16 @@ const Chat: React.FC = () => {
const [showSider, setShowSider] = useState(true); const [showSider, setShowSider] = useState(true);
const [firstChat, setFirstChat] = useState(false); const [firstChat, setFirstChat] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [selectSiderTabs, setSelectSiderTabs] = useState(''); const { data: glmToken, run: getChatGLMToken } = useRequest(GetChatGLMToken, { manual: true });
const { data: glmToken } = useRequest(GetChatGLMToken); const {
const { data: promptList, loading: promptLoading } = useRequest(GetPromptList); data: promptList,
loading: promptLoading,
run: getPromptList,
} = useRequest(GetPromptList, { manual: true });
const [answer, setAnswer] = useState(''); const [answer, setAnswer] = useState('');
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [open, setOpen] = useState(false); const [loginModalOpen, setLoginModalOpen] = useState(false);
const tabShow = showSider && !isMobile;
const access = useAccess(); const access = useAccess();
const messageHistory = useRef<IHistory[]>([]); const messageHistory = useRef<IHistory[]>([]);
...@@ -91,13 +93,13 @@ const Chat: React.FC = () => { ...@@ -91,13 +93,13 @@ const Chat: React.FC = () => {
); );
} }
console.log('access', access);
useEffect(() => { useEffect(() => {
if (access?.token) { if (access?.token) {
setOpen(false); getChatGLMToken();
getPromptList();
setLoginModalOpen(false);
} else { } else {
setOpen(true); setLoginModalOpen(true);
} }
}, [access]); }, [access]);
...@@ -136,7 +138,7 @@ const Chat: React.FC = () => { ...@@ -136,7 +138,7 @@ const Chat: React.FC = () => {
return ( return (
<> <>
<LoginModal open={open} setOpen={setOpen} /> <LoginModal open={loginModalOpen} setOpen={setLoginModalOpen} />
{isMobile && renderMobileHeader()} {isMobile && renderMobileHeader()}
<Row> <Row>
{(showSider || !isMobile) && ( {(showSider || !isMobile) && (
...@@ -154,7 +156,11 @@ const Chat: React.FC = () => { ...@@ -154,7 +156,11 @@ const Chat: React.FC = () => {
</div> </div>
<div className={styles.chatFooter}> <div className={styles.chatFooter}>
<Row style={{ width: '240px' }} justify={'center'} align={'middle'}> <Row style={{ width: '240px' }} justify={'center'} align={'middle'}>
<Col span={24} className={styles.chatFooterItem}> <Col
span={24}
className={styles.chatFooterItem}
hidden={!access.roles?.find((x) => ['管理员', 'admin'].includes(x))}
>
<Space <Space
wrap wrap
onClick={() => { onClick={() => {
...@@ -168,7 +174,7 @@ const Chat: React.FC = () => { ...@@ -168,7 +174,7 @@ const Chat: React.FC = () => {
<Col span={24} className={styles.chatFooterItem} style={{ color: '#009B95' }}> <Col span={24} className={styles.chatFooterItem} style={{ color: '#009B95' }}>
<Space wrap> <Space wrap>
<UserOutlined /> <UserOutlined />
游客登录 {access?.name || '请先登录'}
</Space> </Space>
</Col> </Col>
</Row> </Row>
...@@ -209,7 +215,11 @@ const Chat: React.FC = () => { ...@@ -209,7 +215,11 @@ const Chat: React.FC = () => {
</div> </div>
)} )}
</Col> </Col>
{promptLoading && (
<Col span={24}>
<PageLoading></PageLoading>
</Col>
)}
<Col span={'24'} style={{ padding: isMobile ? '' : '0 100px' }}> <Col span={'24'} style={{ padding: isMobile ? '' : '0 100px' }}>
{firstChat ? ( {firstChat ? (
<div style={{ marginBottom: 150 }}> <div style={{ marginBottom: 150 }}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment