feat: 模型选择
This commit is contained in:
parent
4ec9b7d507
commit
1c63ef8b28
|
|
@ -1,4 +1,7 @@
|
||||||
.WelcomePage {
|
.WelcomePage {
|
||||||
|
.TitleLabel {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.PageHeader {
|
.PageHeader {
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { PageContainer, ProForm, ProFormTextArea } 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 { Button, Divider, Dropdown, Flex, MenuProps, message, Space, Tag, theme } from 'antd';
|
import { Button, Divider, Dropdown, Flex, message, Space, Tag, theme } from 'antd';
|
||||||
import React, { useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import './Welcome.less'
|
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';
|
import { TweenOneGroup } from 'rc-tween-one';
|
||||||
|
|
||||||
const tagGroupStyle: React.CSSProperties = {
|
const tagGroupStyle: React.CSSProperties = {
|
||||||
|
|
@ -15,20 +15,25 @@ const tagGroupStyle: React.CSSProperties = {
|
||||||
marginTop: 16,
|
marginTop: 16,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ModelItem = {
|
||||||
|
label: string,
|
||||||
|
key: string
|
||||||
|
}
|
||||||
|
|
||||||
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 textAreaRef = useRef<any>(null);
|
||||||
const [tools, setTools] = useState<any>([]);
|
const [tools, setTools] = useState<any>([]);
|
||||||
|
const [model, setModel] = useState<ModelItem|null>(null);
|
||||||
const textAreaFieldProps:any = {
|
const textAreaFieldProps: any = {
|
||||||
ref: textAreaRef,
|
ref: textAreaRef,
|
||||||
autoSize: {
|
autoSize: {
|
||||||
minRows: 1,
|
minRows: 1,
|
||||||
maxRows: 5,
|
maxRows: 5,
|
||||||
},
|
},
|
||||||
variant: 'borderless',
|
variant: 'borderless',
|
||||||
onPressEnter: (e:any) => {
|
onPressEnter: (e: any) => {
|
||||||
const { nativeEvent: { shiftKey, key } } = e;
|
const { nativeEvent: { shiftKey, key } } = e;
|
||||||
if (shiftKey && key === "Enter") {
|
if (shiftKey && key === "Enter") {
|
||||||
const { current: { resizableTextArea: { textArea } } } = textAreaRef;
|
const { current: { resizableTextArea: { textArea } } } = textAreaRef;
|
||||||
|
|
@ -63,7 +68,7 @@ const Welcome: React.FC = () => {
|
||||||
message.info("创建知识库")
|
message.info("创建知识库")
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const toolsKeys:string[] = tools?.map((e: any) => e.key);
|
const toolsKeys: string[] = tools?.map((e: any) => e.key);
|
||||||
if (toolsKeys?.includes(key)) {
|
if (toolsKeys?.includes(key)) {
|
||||||
setTools(tools.filter((e: any) => e.key !== key));
|
setTools(tools.filter((e: any) => e.key !== key));
|
||||||
return;
|
return;
|
||||||
|
|
@ -71,13 +76,18 @@ const Welcome: React.FC = () => {
|
||||||
if (key.includes('kb')) {
|
if (key.includes('kb')) {
|
||||||
const kbObj = items?.find(i => i.key === 'searchKB')
|
const kbObj = items?.find(i => i.key === 'searchKB')
|
||||||
const obj = kbObj?.children?.find(i => i.key === key);
|
const obj = kbObj?.children?.find(i => i.key === key);
|
||||||
setTools([{...obj, icon: kbObj?.icon}, ...tools]);
|
setTools([{ ...obj, icon: kbObj?.icon }, ...tools]);
|
||||||
} else {
|
} else {
|
||||||
const obj = items?.find(i => i.key === key);
|
const obj = items?.find(i => i.key === key);
|
||||||
setTools([obj, ...tools]);
|
setTools([obj, ...tools]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const modelsItems:ModelItem[]|any[] = [{
|
||||||
|
key: 'chatgpt',
|
||||||
|
label: 'ChatGtp'
|
||||||
|
}]
|
||||||
|
|
||||||
const Tags = () => {
|
const Tags = () => {
|
||||||
if (tools?.length) {
|
if (tools?.length) {
|
||||||
return (<>
|
return (<>
|
||||||
|
|
@ -103,8 +113,21 @@ const Welcome: React.FC = () => {
|
||||||
return <></>
|
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 (
|
return (
|
||||||
<PageContainer title={false} className='WelcomePage'>
|
<PageContainer title={<Title/>} className='WelcomePage'>
|
||||||
<Flex align='center' justify='center' vertical>
|
<Flex align='center' justify='center' vertical>
|
||||||
<div className='PageHeader'></div>
|
<div className='PageHeader'></div>
|
||||||
<div className='CenterCard'>
|
<div className='CenterCard'>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue