feat: 模型选择

This commit is contained in:
李如威 2025-12-31 16:30:48 +08:00
parent 4ec9b7d507
commit 1c63ef8b28
2 changed files with 37 additions and 11 deletions

View File

@ -1,4 +1,7 @@
.WelcomePage {
.TitleLabel {
cursor: pointer;
}
.PageHeader {
height: 30vh;
}

View File

@ -1,9 +1,9 @@
import { PageContainer, ProForm, ProFormTextArea } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Divider, Dropdown, Flex, MenuProps, message, Space, Tag, theme } from 'antd';
import React, { useRef, useState } from 'react';
import { Button, Divider, Dropdown, Flex, message, Space, Tag, theme } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import './Welcome.less'
import { FileSearchOutlined, GlobalOutlined, PlusOutlined } from '@ant-design/icons';
import { FileSearchOutlined, GlobalOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons';
import { TweenOneGroup } from 'rc-tween-one';
const tagGroupStyle: React.CSSProperties = {
@ -15,20 +15,25 @@ const tagGroupStyle: React.CSSProperties = {
marginTop: 16,
};
type ModelItem = {
label: string,
key: string
}
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 = {
const [model, setModel] = useState<ModelItem|null>(null);
const textAreaFieldProps: any = {
ref: textAreaRef,
autoSize: {
minRows: 1,
maxRows: 5,
},
variant: 'borderless',
onPressEnter: (e:any) => {
onPressEnter: (e: any) => {
const { nativeEvent: { shiftKey, key } } = e;
if (shiftKey && key === "Enter") {
const { current: { resizableTextArea: { textArea } } } = textAreaRef;
@ -56,14 +61,14 @@ const Welcome: React.FC = () => {
{ 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);
const toolsKeys: string[] = tools?.map((e: any) => e.key);
if (toolsKeys?.includes(key)) {
setTools(tools.filter((e: any) => e.key !== key));
return;
@ -71,13 +76,18 @@ const Welcome: React.FC = () => {
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]);
setTools([{ ...obj, icon: kbObj?.icon }, ...tools]);
} else {
const obj = items?.find(i => i.key === key);
setTools([obj, ...tools]);
}
}
const modelsItems:ModelItem[]|any[] = [{
key: 'chatgpt',
label: 'ChatGtp'
}]
const Tags = () => {
if (tools?.length) {
return (<>
@ -97,14 +107,27 @@ const Welcome: React.FC = () => {
{e.label}
</Tag>)}
</TweenOneGroup>
</TweenOneGroup>
</>)
}
return <></>
}
const Title = () => (
<Dropdown menu={{ items: modelsItems }} arrow className='TitleLabel'>
<Flex align='center'>
<span >{model?.label}</span>
<RightOutlined style={{ fontSize: 16}}/>
</Flex>
</Dropdown>
)
useEffect(() => {
setModel(modelsItems[0]);
}, [])
return (
<PageContainer title={false} className='WelcomePage'>
<PageContainer title={<Title/>} className='WelcomePage'>
<Flex align='center' justify='center' vertical>
<div className='PageHeader'></div>
<div className='CenterCard'>