feat: 模型选择

This commit is contained in:
李如威 2025-12-31 16:31:34 +08:00
parent 1c63ef8b28
commit d497a8e83f
3 changed files with 43 additions and 27 deletions

View File

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

View File

@ -1,10 +1,12 @@
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, message, Space, Tag, theme } from 'antd'; import { Button, Divider, Dropdown, Flex, message, Tag, theme } from 'antd';
import React, { useEffect, useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import './Welcome.less' 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 { TweenOneGroup } from 'rc-tween-one';
import HeaderModelSelect from '@/components/Custom/HeaderModelSelect';
import type { ModelItem } from '@/components/Custom/HeaderModelSelect';
const tagGroupStyle: React.CSSProperties = { const tagGroupStyle: React.CSSProperties = {
display: 'flex', display: 'flex',
@ -15,17 +17,13 @@ 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 [model, setModel] = useState<ModelItem | undefined>(undefined);
const textAreaFieldProps: any = { const textAreaFieldProps: any = {
ref: textAreaRef, ref: textAreaRef,
autoSize: { autoSize: {
@ -83,11 +81,6 @@ const Welcome: React.FC = () => {
} }
} }
const modelsItems:ModelItem[]|any[] = [{
key: 'chatgpt',
label: 'ChatGtp'
}]
const Tags = () => { const Tags = () => {
if (tools?.length) { if (tools?.length) {
return (<> return (<>
@ -113,21 +106,8 @@ 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={<Title/>} className='WelcomePage'> <PageContainer title={<HeaderModelSelect value={model} onChange={e => setModel(e)}/>} 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'>