feat: 欢迎页面
This commit is contained in:
parent
f38d23365c
commit
4ec9b7d507
|
|
@ -7,7 +7,7 @@ const Settings: ProLayoutProps & {
|
|||
pwa?: boolean;
|
||||
logo?: string;
|
||||
} = {
|
||||
navTheme: 'realDark',
|
||||
navTheme: 'light',
|
||||
// 拂晓蓝
|
||||
colorPrimary: '#2F54EB',
|
||||
layout: 'side',
|
||||
|
|
|
|||
|
|
@ -51,6 +51,12 @@ export default [
|
|||
path: '/list',
|
||||
component: './table-list',
|
||||
},
|
||||
{
|
||||
name: 'history',
|
||||
icon: 'history',
|
||||
path: '/history',
|
||||
component: './history',
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/welcome',
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@
|
|||
"test:update": "npm run jest -- -u",
|
||||
"tsc": "tsc --noEmit"
|
||||
},
|
||||
"browserslist": ["defaults"],
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
],
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.6.1",
|
||||
"@ant-design/pro-components": "^2.7.19",
|
||||
|
|
@ -40,6 +42,7 @@
|
|||
"antd-style": "^3.7.0",
|
||||
"classnames": "^2.5.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"rc-tween-one": "^3.0.6",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
|
|
@ -71,5 +74,7 @@
|
|||
"umi-presets-pro": "^2.0.3",
|
||||
"umi-serve": "^1.9.11"
|
||||
},
|
||||
"engines": { "node": ">=20.0.0" }
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,4 +49,5 @@ export default {
|
|||
'menu.editor.flow': '流程编辑器',
|
||||
'menu.editor.mind': '脑图编辑器',
|
||||
'menu.editor.koni': '拓扑编辑器',
|
||||
'menu.history': "对话历史",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
.WelcomePage {
|
||||
.PageHeader {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.CenterCard {
|
||||
width: 50vw;
|
||||
padding: 18px 18px 0 18px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 24px,
|
||||
}
|
||||
|
||||
.Flex {
|
||||
flex: 1;
|
||||
.ant-form-item {
|
||||
--ant-form-item-margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,126 @@
|
|||
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
||||
import { PageContainer, ProForm, ProFormTextArea } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Card, theme } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button, Divider, Dropdown, Flex, MenuProps, message, Space, Tag, theme } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import './Welcome.less'
|
||||
import { FileSearchOutlined, GlobalOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { TweenOneGroup } from 'rc-tween-one';
|
||||
|
||||
const tagGroupStyle: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
marginTop: 16,
|
||||
};
|
||||
|
||||
const Welcome: React.FC = () => {
|
||||
const { token } = theme.useToken();
|
||||
const { initialState } = useModel('@@initialState');
|
||||
const textAreaRef = useRef<any>(null);
|
||||
const [tools, setTools] = useState<any>([]);
|
||||
|
||||
const textAreaFieldProps:any = {
|
||||
ref: textAreaRef,
|
||||
autoSize: {
|
||||
minRows: 1,
|
||||
maxRows: 5,
|
||||
},
|
||||
variant: 'borderless',
|
||||
onPressEnter: (e:any) => {
|
||||
const { nativeEvent: { shiftKey, key } } = e;
|
||||
if (shiftKey && key === "Enter") {
|
||||
const { current: { resizableTextArea: { textArea } } } = textAreaRef;
|
||||
e.preventDefault();
|
||||
const text = textArea?.value;
|
||||
console.log(text);
|
||||
textArea.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const items = [{
|
||||
key: 'searchWeb',
|
||||
label: '搜索网站',
|
||||
color: '#55acee',
|
||||
icon: <GlobalOutlined />,
|
||||
}, {
|
||||
key: 'searchKB',
|
||||
label: '知识库',
|
||||
color: '#55acee',
|
||||
icon: <FileSearchOutlined />,
|
||||
children: [
|
||||
{ key: 'searchKB_kb1', label: '知识库1' },
|
||||
{ key: 'searchKB_kb2', label: '知识库2' },
|
||||
{ type: 'divider' },
|
||||
{ key: 'searchKB_add', label: '新增知识库' },
|
||||
],
|
||||
}]
|
||||
|
||||
const itemOnClick = ({ key }: any) => {
|
||||
if (key === 'searchKB_add') {
|
||||
message.info("创建知识库")
|
||||
return;
|
||||
}
|
||||
const toolsKeys:string[] = tools?.map((e: any) => e.key);
|
||||
if (toolsKeys?.includes(key)) {
|
||||
setTools(tools.filter((e: any) => e.key !== key));
|
||||
return;
|
||||
}
|
||||
if (key.includes('kb')) {
|
||||
const kbObj = items?.find(i => i.key === 'searchKB')
|
||||
const obj = kbObj?.children?.find(i => i.key === key);
|
||||
setTools([{...obj, icon: kbObj?.icon}, ...tools]);
|
||||
} else {
|
||||
const obj = items?.find(i => i.key === key);
|
||||
setTools([obj, ...tools]);
|
||||
}
|
||||
}
|
||||
|
||||
const Tags = () => {
|
||||
if (tools?.length) {
|
||||
return (<>
|
||||
<Divider style={{ height: 1, margin: '8px 0' }} />
|
||||
<TweenOneGroup
|
||||
appear={false}
|
||||
style={tagGroupStyle}
|
||||
enter={{ scale: 0.8, opacity: 0, type: 'from', duration: 100 }}
|
||||
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
|
||||
onEnd={(e) => {
|
||||
if (e.type === 'appear' || e.type === 'enter') {
|
||||
(e.target as any).style = 'display: inline-block';
|
||||
}
|
||||
}}
|
||||
>
|
||||
{tools?.map((e: any) => <Tag closable key={e.key} icon={e.icon} onClose={() => itemOnClick({ key: e.key })}>
|
||||
{e.label}
|
||||
</Tag>)}
|
||||
|
||||
</TweenOneGroup>
|
||||
</>)
|
||||
}
|
||||
return <></>
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProCard></ProCard>
|
||||
<PageContainer title={false} className='WelcomePage'>
|
||||
<Flex align='center' justify='center' vertical>
|
||||
<div className='PageHeader'></div>
|
||||
<div className='CenterCard'>
|
||||
<ProForm submitter={false}>
|
||||
<Flex align='flex-end'>
|
||||
<Dropdown menu={{ items, onClick: itemOnClick }} placement='topCenter' arrow>
|
||||
<Button icon={<PlusOutlined />} type='text'></Button>
|
||||
</Dropdown>
|
||||
<div className='Flex'>
|
||||
<ProFormTextArea placeholder="按 Shift+Enter 进行提问" fieldProps={textAreaFieldProps} />
|
||||
</div>
|
||||
</Flex>
|
||||
</ProForm>
|
||||
<Tags />
|
||||
</div>
|
||||
</Flex>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import { PageContainer } from "@ant-design/pro-components"
|
||||
const HistoryPage = () => {
|
||||
return <PageContainer>
|
||||
|
||||
</PageContainer>
|
||||
}
|
||||
|
||||
export default HistoryPage;
|
||||
Loading…
Reference in New Issue