feat: 欢迎页面
This commit is contained in:
parent
f38d23365c
commit
4ec9b7d507
|
|
@ -7,7 +7,7 @@ const Settings: ProLayoutProps & {
|
||||||
pwa?: boolean;
|
pwa?: boolean;
|
||||||
logo?: string;
|
logo?: string;
|
||||||
} = {
|
} = {
|
||||||
navTheme: 'realDark',
|
navTheme: 'light',
|
||||||
// 拂晓蓝
|
// 拂晓蓝
|
||||||
colorPrimary: '#2F54EB',
|
colorPrimary: '#2F54EB',
|
||||||
layout: 'side',
|
layout: 'side',
|
||||||
|
|
|
||||||
|
|
@ -51,6 +51,12 @@ export default [
|
||||||
path: '/list',
|
path: '/list',
|
||||||
component: './table-list',
|
component: './table-list',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'history',
|
||||||
|
icon: 'history',
|
||||||
|
path: '/history',
|
||||||
|
component: './history',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/welcome',
|
redirect: '/welcome',
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,9 @@
|
||||||
"test:update": "npm run jest -- -u",
|
"test:update": "npm run jest -- -u",
|
||||||
"tsc": "tsc --noEmit"
|
"tsc": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"browserslist": ["defaults"],
|
"browserslist": [
|
||||||
|
"defaults"
|
||||||
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.6.1",
|
"@ant-design/icons": "^5.6.1",
|
||||||
"@ant-design/pro-components": "^2.7.19",
|
"@ant-design/pro-components": "^2.7.19",
|
||||||
|
|
@ -40,6 +42,7 @@
|
||||||
"antd-style": "^3.7.0",
|
"antd-style": "^3.7.0",
|
||||||
"classnames": "^2.5.1",
|
"classnames": "^2.5.1",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
|
"rc-tween-one": "^3.0.6",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
|
|
@ -71,5 +74,7 @@
|
||||||
"umi-presets-pro": "^2.0.3",
|
"umi-presets-pro": "^2.0.3",
|
||||||
"umi-serve": "^1.9.11"
|
"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.flow': '流程编辑器',
|
||||||
'menu.editor.mind': '脑图编辑器',
|
'menu.editor.mind': '脑图编辑器',
|
||||||
'menu.editor.koni': '拓扑编辑器',
|
'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 { useModel } from '@umijs/max';
|
||||||
import { Card, theme } from 'antd';
|
import { Button, Divider, Dropdown, Flex, MenuProps, message, Space, Tag, theme } from 'antd';
|
||||||
import React from 'react';
|
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 Welcome: React.FC = () => {
|
||||||
const { token } = theme.useToken();
|
const { token } = theme.useToken();
|
||||||
const { initialState } = useModel('@@initialState');
|
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 (
|
return (
|
||||||
<PageContainer>
|
<PageContainer title={false} className='WelcomePage'>
|
||||||
<ProCard></ProCard>
|
<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>
|
</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