feat: 模型选择
This commit is contained in:
parent
1c63ef8b28
commit
d497a8e83f
|
|
@ -0,0 +1,36 @@
|
|||
import { Dropdown, Flex } from 'antd';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import './index.less';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export type ModelItem = { label: string, key: string }
|
||||
|
||||
export type HeaderModelChangeHandler = (value: ModelItem) => void
|
||||
|
||||
export type HeaderModelProps = {
|
||||
value?: ModelItem,
|
||||
onChange?: HeaderModelChangeHandler,
|
||||
}
|
||||
|
||||
export default (props: HeaderModelProps) => {
|
||||
const modelsItems: ModelItem[] | any[] = [{
|
||||
key: 'chatgpt',
|
||||
label: 'ChatGtp'
|
||||
}]
|
||||
|
||||
const onClick: MenuProps['onClick'] = e => {
|
||||
props.onChange && props.onChange(modelsItems?.find(o => o.key === e.key))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
!props.value && props?.onChange && props.onChange(modelsItems[0]);
|
||||
}, [props.value])
|
||||
|
||||
return <Dropdown menu={{ items: modelsItems, onClick }} arrow className='TitleLabel'>
|
||||
<Flex align='center'>
|
||||
<span >{props?.value?.label}</span>
|
||||
<RightOutlined style={{ fontSize: 16 }} />
|
||||
</Flex>
|
||||
</Dropdown>
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
import { PageContainer, ProForm, ProFormTextArea } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Button, Divider, Dropdown, Flex, message, Space, Tag, theme } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Button, Divider, Dropdown, Flex, message, Tag, theme } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import './Welcome.less'
|
||||
import { FileSearchOutlined, GlobalOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import { FileSearchOutlined, GlobalOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { TweenOneGroup } from 'rc-tween-one';
|
||||
import HeaderModelSelect from '@/components/Custom/HeaderModelSelect';
|
||||
import type { ModelItem } from '@/components/Custom/HeaderModelSelect';
|
||||
|
||||
const tagGroupStyle: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
|
|
@ -15,17 +17,13 @@ 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 [model, setModel] = useState<ModelItem|null>(null);
|
||||
const [model, setModel] = useState<ModelItem | undefined>(undefined);
|
||||
const textAreaFieldProps: any = {
|
||||
ref: textAreaRef,
|
||||
autoSize: {
|
||||
|
|
@ -83,11 +81,6 @@ const Welcome: React.FC = () => {
|
|||
}
|
||||
}
|
||||
|
||||
const modelsItems:ModelItem[]|any[] = [{
|
||||
key: 'chatgpt',
|
||||
label: 'ChatGtp'
|
||||
}]
|
||||
|
||||
const Tags = () => {
|
||||
if (tools?.length) {
|
||||
return (<>
|
||||
|
|
@ -113,21 +106,8 @@ const Welcome: React.FC = () => {
|
|||
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={<Title/>} className='WelcomePage'>
|
||||
<PageContainer title={<HeaderModelSelect value={model} onChange={e => setModel(e)}/>} className='WelcomePage'>
|
||||
<Flex align='center' justify='center' vertical>
|
||||
<div className='PageHeader'></div>
|
||||
<div className='CenterCard'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue