feat: 欢迎页面

This commit is contained in:
李如威 2025-12-31 15:59:36 +08:00
parent f38d23365c
commit 4ec9b7d507
7 changed files with 159 additions and 8 deletions

View File

@ -7,7 +7,7 @@ const Settings: ProLayoutProps & {
pwa?: boolean;
logo?: string;
} = {
navTheme: 'realDark',
navTheme: 'light',
// 拂晓蓝
colorPrimary: '#2F54EB',
layout: 'side',

View File

@ -51,6 +51,12 @@ export default [
path: '/list',
component: './table-list',
},
{
name: 'history',
icon: 'history',
path: '/history',
component: './history',
},
{
path: '/',
redirect: '/welcome',

View File

@ -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"
}
}

View File

@ -49,4 +49,5 @@ export default {
'menu.editor.flow': '流程编辑器',
'menu.editor.mind': '脑图编辑器',
'menu.editor.koni': '拓扑编辑器',
'menu.history': "对话历史",
};

20
src/pages/Welcome.less Normal file
View File

@ -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;
}
}
}

View File

@ -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>
);
};

View File

@ -0,0 +1,8 @@
import { PageContainer } from "@ant-design/pro-components"
const HistoryPage = () => {
return <PageContainer>
</PageContainer>
}
export default HistoryPage;