adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): move create custom model to model list

Browse Source
This commit is contained in:
zhaoying
2026-02-09 10:00:36 +08:00
parent 4d98bace87
commit 81e92b4fa6
9 changed files with 70 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/views/ModelManagement/List.tsx
View File

@@ -10,11 +10,11 @@
* Shows model tags and allows viewing model details
*/
import { useRef, useState, useEffect, type FC } from 'react';
import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Button, Flex, Row, Col } from 'antd'
import { useTranslation } from 'react-i18next';
import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef } from './types'
import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
import RbCard from '@/components/RbCard/Card'
import { getModelNewList } from '@/api/models'
import PageEmpty from '@/components/Empty/PageEmpty';
@@ -26,11 +26,12 @@ import { getLogoUrl } from './utils'
/**
* Model list component
*/
const ModelList: FC<{ query: any }> = ({ query }) => {
const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListItem) => void; }> (({ query, handleEdit }, ref) => {
const { t } = useTranslation();
const keyConfigModalRef = useRef<KeyConfigModalRef>(null)
const modelListDetailRef = useRef<ModelListDetailRef>(null)
const [list, setList] = useState<ProviderModelItem[]>([])
useEffect(() => {
getList()
}, [query])
@@ -54,6 +55,11 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
keyConfigModalRef.current?.handleOpen(vo)
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
getList,
modelListDetailRefresh: () => modelListDetailRef.current?.handleRefresh()
}));
return (
<>
{list.length === 0
@@ -96,9 +102,10 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
<ModelListDetail
ref={modelListDetailRef}
refresh={getList}
handleEdit={handleEdit}
/>
</>
)
}
})
export default ModelList

4
web/src/views/ModelManagement/Square.tsx
View File

@@ -26,7 +26,7 @@ import { getLogoUrl } from './utils'
/**
* Model square component
*/
const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPlazaItem) => void; }>(({ query, handleEdit }, ref) => {
const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
const { t } = useTranslation();
const { message } = App.useApp()
const modelSquareDetailRef = useRef<ModelSquareDetailRef>(null)
@@ -96,7 +96,6 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
<Flex justify="space-between">
<Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
<Space>
{!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
{item.is_added
? <Button type="primary" disabled>{t('modelNew.added')}</Button>
: <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
@@ -114,7 +113,6 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
<ModelSquareDetail
ref={modelSquareDetailRef}
refresh={getList}
handleEdit={handleEdit}
/>
</>
)

34
web/src/views/ModelManagement/components/CustomModelModal.tsx
View File

@@ -11,10 +11,10 @@
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Select } from 'antd';
import { Form, Input, App } from 'antd';
import { useTranslation } from 'react-i18next';
import type { CustomModelForm, ModelPlazaItem, CustomModelModalRef, CustomModelModalProps } from '../types';
import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
import RbModal from '@/components/RbModal'
import CustomSelect from '@/components/CustomSelect'
import UploadImages from '@/components/Upload/UploadImages'
@@ -30,22 +30,21 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
const { t } = useTranslation();
const { message } = App.useApp();
const [visible, setVisible] = useState(false);
const [model, setModel] = useState<ModelPlazaItem>({} as ModelPlazaItem);
const [model, setModel] = useState<ModelListItem>({} as ModelListItem);
const [isEdit, setIsEdit] = useState(false);
const [form] = Form.useForm<CustomModelForm>();
const [loading, setLoading] = useState(false)
const formValues = Form.useWatch([], form)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ModelPlazaItem);
setModel({} as ModelListItem);
form.resetFields();
setLoading(false)
setVisible(false);
};
/** Open modal with optional model data for editing */
const handleOpen = (model?: ModelPlazaItem) => {
const handleOpen = (model?: ModelListItem) => {
if (model) {
setIsEdit(true);
setModel(model);
@@ -66,7 +65,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
const res = isEdit ? updateCustomModel(model.id, rest) : addCustomModel(data)
res.then(() => {
refresh && refresh()
refresh && refresh(isEdit)
handleClose()
message.success(isEdit ? t('common.updateSuccess') : t('common.createSuccess'))
})
@@ -79,12 +78,10 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
form
.validateFields()
.then((values) => {
setLoading(true)
const { logo, ...rest } = values;
let formData: CustomModelForm = {
...rest
}
formData.is_official = false;
if (typeof logo === 'object' && logo?.response?.data.file_id) {
getFileLink(logo?.response?.data.file_id)
@@ -111,8 +108,6 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
handleOpen,
}));
console.log('formValues', formValues)
return (
<RbModal
title={isEdit ? `${model.name} - ${t('modelNew.modelConfiguration')}` : t('modelNew.createCustomModel')}
@@ -174,11 +169,22 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
>
<Input.TextArea placeholder={t('common.pleaseEnter')} />
</Form.Item>
<Form.Item
name="tags"
label={t('modelNew.tags')}
name={["api_keys", 0, "api_key"]}
label={t('modelNew.api_key')}
rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('modelNew.api_key') }) }]}
>
<Select mode="tags" placeholder={t('common.pleaseEnter')} />
<Input.Password placeholder={t('common.pleaseEnter')} />
</Form.Item>
<Form.Item
name={["api_keys", 0, "api_base"]}
label={t('modelNew.api_base')}
rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('modelNew.api_base') }) }]}
>
<Input placeholder="https://api.example.com/v1" />
</Form.Item>
</Form>
</RbModal>

11
web/src/views/ModelManagement/components/ModelListDetail.tsx
View File

@@ -30,12 +30,13 @@ import CustomSelect from '@/components/CustomSelect'
interface ModelListDetailProps {
/** Callback to refresh parent list */
refresh?: () => void;
handleEdit: (vo?: ModelListItem) => void;
}
/**
* Model list detail drawer component
*/
const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh }, ref) => {
const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh, handleEdit }, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const [data, setData] = useState<ProviderModelItem>({} as ProviderModelItem)
@@ -95,7 +96,8 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleOpen,
handleRefresh,
}));
/** Filter models by selected type */
@@ -149,7 +151,10 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
</Tooltip>
<div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
<Row gutter={12}>
<Col span={24}>
<Col span={12}>
<Button block onClick={() => handleEdit(item)}>{t('modelNew.modelConfiguration')}</Button>
</Col>
<Col span={12}>
<Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
</Col>
</Row>

5
web/src/views/ModelManagement/components/ModelSquareDetail.tsx
View File

@@ -29,14 +29,12 @@ import { getLogoUrl } from '../utils'
interface ModelSquareDetailProps {
/** Callback to refresh parent list */
refresh: () => void;
/** Callback to edit model */
handleEdit: (vo: ModelPlazaItem) => void;
}
/**
* Model square detail drawer component
*/
const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh, handleEdit }, ref) => {
const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh }, ref) => {
const { t } = useTranslation();
const { message } = App.useApp()
const [model, setModel] = useState<ModelPlaza>({} as ModelPlaza)
@@ -112,7 +110,6 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
<Flex justify="space-between">
<Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
<Space>
{!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
{item.is_added
? <Button type="primary" disabled>{t('modelNew.added')}</Button>
: <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>

27
web/src/views/ModelManagement/index.tsx
View File

@@ -15,7 +15,7 @@ import { Button, Flex, Space, type SegmentedProps, Form } from 'antd'
import { useTranslation } from 'react-i18next';
import GroupModelModal from './components/GroupModelModal'
import type { ModelListItem, GroupModelModalRef, CustomModelModalRef, ModelPlazaItem, BaseRef, Query } from './types'
import type { ModelListItem, GroupModelModalRef, CustomModelModalRef, BaseRef, Query } from './types'
import SearchInput from '@/components/SearchInput'
import PageTabs from '@/components/PageTabs'
import GroupModel from './Group'
@@ -38,7 +38,7 @@ const tabKeys = ['group', 'list', 'square']
const configModalRef = useRef<GroupModelModalRef>(null)
const customModelModalRef = useRef<CustomModelModalRef>(null)
const groupRef = useRef<BaseRef>(null)
const squareRef = useRef<BaseRef>(null)
const modelListRef = useRef<BaseRef>(null)
const [form] = Form.useForm<Query>()
const query = Form.useWatch([], form)
@@ -56,24 +56,29 @@ const tabKeys = ['group', 'list', 'square']
}
/** Open edit modal based on active tab */
const handleEdit = (vo?: ModelListItem | ModelPlazaItem) => {
const handleEdit = (vo?: ModelListItem | ModelListItem) => {
switch(activeTab) {
case 'group':
configModalRef?.current?.handleOpen(vo as ModelListItem)
break
case 'square':
customModelModalRef?.current?.handleOpen(vo as ModelPlazaItem)
case 'list':
customModelModalRef?.current?.handleOpen(vo as ModelListItem)
break
}
}
/** Refresh list based on active tab */
const handleRefresh = () => {
const handleRefresh = (isEdit?: boolean) => {
switch (activeTab) {
case 'group':
groupRef.current?.getList()
break
case 'square':
squareRef.current?.getList()
case 'list':
console.log('isEdit', isEdit)
if (isEdit) {
modelListRef.current?.modelListDetailRefresh?.()
} else {
modelListRef.current?.getList()
}
break
}
}
@@ -122,15 +127,15 @@ const tabKeys = ['group', 'list', 'square']
</Form.Item>
}
{activeTab === 'group' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createGroupModel')}</Button>}
{activeTab === 'square' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createCustomModel')}</Button>}
{activeTab === 'list' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createCustomModel')}</Button>}
</Space>
</Form>
</Flex>
<div className="rb:w-full rb:h-[calc(100%-48px)] rb:my-4">
{activeTab === 'group' && <GroupModel ref={groupRef} query={query} handleEdit={handleEdit} />}
{activeTab === 'list' && <ModelList query={query} />}
{activeTab === 'square' && <ModelSquare ref={squareRef} query={query} handleEdit={handleEdit} />}
{activeTab === 'list' && <ModelList ref={modelListRef} query={query} handleEdit={handleEdit} />}
{activeTab === 'square' && <ModelSquare query={query} />}
</div>
<GroupModelModal
ref={configModalRef}

16
web/src/views/ModelManagement/types.ts
View File

@@ -80,6 +80,7 @@ export interface GroupModelModalProps {
export interface ModelListDetailRef {
/** Open detail drawer with provider model data */
handleOpen: (vo: ProviderModelItem) => void;
handleRefresh: () => void;
}
/**
@@ -284,10 +285,12 @@ export interface CustomModelForm {
logo?: any;
/** Model description */
description: string;
/** Whether model is official */
is_official: boolean;
/** Model tags */
tags: string[];
api_keys: Array<{
/** API key value */
api_key: string;
/** API base URL */
api_base: string;
}>
}
/**
@@ -295,7 +298,7 @@ export interface CustomModelForm {
*/
export interface CustomModelModalRef {
/** Open modal with optional model plaza item */
handleOpen: (vo?: ModelPlazaItem) => void;
handleOpen: (vo?: ModelListItem) => void;
}
/**
@@ -303,7 +306,7 @@ export interface CustomModelModalRef {
*/
export interface CustomModelModalProps {
/** Callback to refresh model list */
refresh?: () => void;
refresh?: (flag?: boolean) => void;
}
/**
@@ -312,4 +315,5 @@ export interface CustomModelModalProps {
export interface BaseRef {
/** Refresh list data */
getList: () => void;
modelListDetailRefresh?: () => void;
}