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

style(web): translate the comments in the src/views directory into English

Browse Source
This commit is contained in:
zhaoying
2026-02-03 18:38:04 +08:00
parent a191e32f71
commit 9e195ea63b
155 changed files with 4169 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:28
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:28
*/
/**
* Custom Model Modal
* Modal for creating and editing custom models in the model square
* Supports logo upload, type/provider selection, and tagging
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Select } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,6 +21,9 @@ import UploadImages from '@/components/Upload/UploadImages'
import { updateCustomModel, addCustomModel, modelTypeUrl, modelProviderUrl } from '@/api/models'
import { getFileLink } from '@/api/fileStorage'
/**
* Custom model modal component
*/
const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(({
refresh
}, ref) => {
@@ -21,6 +36,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
const [loading, setLoading] = useState(false)
const formValues = Form.useWatch([], form)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ModelPlazaItem);
form.resetFields();
@@ -28,6 +44,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
setVisible(false);
};
/** Open modal with optional model data for editing */
const handleOpen = (model?: ModelPlazaItem) => {
if (model) {
setIsEdit(true);
@@ -42,6 +59,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
}
setVisible(true);
};
/** Update or create custom model */
const handleUpdate = (data: CustomModelForm) => {
setLoading(true)
const { type, provider, ...rest} = data
@@ -56,6 +74,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
setLoading(false)
});
}
/** Validate and save custom model */
const handleSave = () => {
form
.validateFields()
@@ -87,6 +106,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
});
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

20
web/src/views/ModelManagement/components/GroupModelModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:33
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:33
*/
/**
* Group Model Modal
* Modal for creating and editing composite/group models
* Supports multiple API key configuration and load balancing
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Select } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -10,6 +22,9 @@ import UploadImages from '@/components/Upload/UploadImages'
import ModelImplement from './ModelImplement'
import { getFileLink } from '@/api/fileStorage'
/**
* Group model modal component
*/
const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
refresh
}, ref) => {
@@ -22,6 +37,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
const [loading, setLoading] = useState(false)
const type = Form.useWatch(['type'], form)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ModelListItem);
form.resetFields();
@@ -29,6 +45,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
setVisible(false);
};
/** Open modal with optional model data for editing */
const handleOpen = (model?: ModelListItem) => {
if (model) {
setIsEdit(true);
@@ -44,6 +61,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
}
setVisible(true);
};
/** Validate and save group model */
const handleSave = () => {
form
.validateFields()
@@ -73,6 +91,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
});
}
/** Update or create group model */
const handleUpdate = (data: CompositeModelForm) => {
setLoading(true)
const { type, ...rest } = data
@@ -90,6 +109,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
});
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

20
web/src/views/ModelManagement/components/KeyConfigModal.tsx
View File

@@ -1,10 +1,26 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:40
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:40
*/
/**
* Key Configuration Modal
* Modal for configuring API keys for model providers
* Allows setting API key and base URL
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App } from 'antd';
import { useTranslation } from 'react-i18next';
import type { KeyConfigModalForm, ProviderModelItem, KeyConfigModalRef, KeyConfigModalProps } from '../types';
import RbModal from '@/components/RbModal'
import { updateProviderApiKeys } from '@/api/models'
/**
* Key configuration modal component
*/
const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
refresh
}, ref) => {
@@ -15,6 +31,7 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
const [form] = Form.useForm<KeyConfigModalForm>();
const [loading, setLoading] = useState(false)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ProviderModelItem);
form.resetFields();
@@ -22,10 +39,12 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
setVisible(false);
};
/** Open modal with provider model data */
const handleOpen = (vo: ProviderModelItem) => {
setVisible(true);
setModel(vo);
};
/** Save API key configuration */
const handleSave = () => {
form
.validateFields()
@@ -51,6 +70,7 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
});
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

29
web/src/views/ModelManagement/components/ModelImplement/SubModelModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:20
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:54:54
*/
/**
* Sub-Model Modal
* Modal for selecting models and API keys to add to group model
* Uses cascader for hierarchical selection
*/
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { Form, Cascader, App, type CascaderProps } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -10,12 +22,19 @@ import type { ProviderModelItem } from '../../types'
const { SHOW_CHILD } = Cascader;
/**
* Cascader option interface
*/
interface Option {
value: string | number;
label: string;
children?: Option[];
[key: string]: any;
}
/**
* Sub-model modal component
*/
const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
refresh,
type,
@@ -38,7 +57,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
}
}, [groupedByProvider, provider])
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset state */
const handleClose = () => {
form.resetFields();
setVisible(false);
@@ -46,11 +65,12 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
setModelList([])
};
/** Open modal */
const handleOpen = () => {
form.resetFields()
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save selected models and API keys */
const handleSave = () => {
form
.validateFields()
@@ -65,6 +85,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
handleClose()
})
}
/** Handle cascader selection change */
const handleChange = (value: (string | number)[][], selectedOptions: Option[][]) => {
const filterList = selectedOptions.filter(vo => vo.length === 1).map(item => item[0])
const lastFilterLit = value.filter(vo => vo.length !== 1)
@@ -75,6 +96,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
setSelecteds(selectedOptions)
}
/** Handle provider change and load models */
const handleChangeProvider = (provider: string, api_key_ids?: any[]) => {
form.setFieldValue('api_key_ids', undefined)
if (provider) {
@@ -110,6 +132,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
setModelList([])
}
}
/** Custom display renderer for cascader */
const displayRender: CascaderProps<Option>['displayRender'] = (labels, selectedOptions = []) =>
labels.map((label, i) => {
const option = selectedOptions[i];
@@ -123,7 +146,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
return <span key={option?.value || i}>{label} / </span>;
});
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

26
web/src/views/ModelManagement/components/ModelImplement/index.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:12
*/
/**
* Model Implementation Component
* Manages model implementations with API keys for group models
* Allows adding and removing model-API key associations
*/
import { type FC, useRef } from "react";
import { useTranslation } from 'react-i18next';
import { Flex, Button, Space, App } from 'antd'
@@ -7,16 +19,27 @@ import SubModelModal from './SubModelModal'
import Empty from '@/components/Empty'
import Tag from '@/components/Tag'
/**
* Component props
*/
interface ModelImplementProps {
/** Model type */
type?: string;
/** Current model list value */
value?: any;
/** Callback when value changes */
onChange?: (value: any) => void;
}
/**
* Model implementation management component
*/
const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
const { t } = useTranslation();
const { modal, message } = App.useApp();
const subModelModalRef = useRef<SubModelModalRef>(null)
/** Open add implementation modal */
const handleAdd = () => {
if (!type || type.trim() === '') {
message.warning(t('common.selectPlaceholder', { title: t('modelNew.type') }))
@@ -24,6 +47,7 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
}
subModelModalRef.current?.handleOpen()
}
/** Delete model implementation */
const handleDelete = (vo: any) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: [vo.model_name, vo.api_key].join(' / ') }),
@@ -36,6 +60,7 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
}
})
}
/** Refresh model list after adding implementations */
const handleRefresh = (list: ModelList[]) => {
const existingModels = value || [];
let updatedModels = [...existingModels];
@@ -48,6 +73,7 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
onChange?.([...updatedModels]);
}
/** Group models by provider */
const groupedByProvider: Record<string, ModelList[]> = (value || []).reduce((acc: Record<string, ModelList[]>, item: ModelList) => {
const provider = item.provider || 'unknown';
if (!acc[provider]) acc[provider] = [];

32
web/src/views/ModelManagement/components/ModelImplement/types.ts
View File

@@ -1,17 +1,49 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:24
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:24
*/
/**
* Type definitions for Model Implementation
*/
import type { ModelListItem } from '../../types'
/**
* Model list item with API key ID
*/
export interface ModelList extends ModelListItem {
/** Associated API key ID */
api_key_id: string;
}
/**
* Sub-model modal form data
*/
export interface SubModelModalForm {
/** Model provider */
provider: string;
/** Selected API key IDs (nested array for cascader) */
api_key_ids: string[][];
}
/**
* Sub-model modal ref interface
*/
export interface SubModelModalRef {
/** Open modal */
handleOpen: () => void;
}
/**
* Sub-model modal props
*/
export interface SubModelModalProps {
/** Model type filter */
type?: string;
/** Callback to update model list */
refresh?: (vo: ModelList[]) => void;
/** Existing models grouped by provider */
groupedByProvider?: Record<string, ModelList[]>
}

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

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:45
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:45
*/
/**
* Model List Detail Drawer
* Displays detailed list of models from a specific provider
* Allows filtering by type and configuring API keys
*/
import { useState, useImperativeHandle, forwardRef, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Switch, Row, Col, Space, Tooltip } from 'antd'
@@ -12,10 +24,17 @@ import { getModelNewList, updateModelStatus, modelTypeUrl } from '@/api/models'
import { getLogoUrl } from '../utils'
import CustomSelect from '@/components/CustomSelect'
/**
* Component props
*/
interface ModelListDetailProps {
/** Callback to refresh parent list */
refresh?: () => void;
}
/**
* Model list detail drawer component
*/
const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh }, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
@@ -25,12 +44,14 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
const [loading, setLoading] = useState(false)
const [type, setType] = useState<string | undefined | null>(null)
/** Open drawer with provider model data */
const handleOpen = (vo: ProviderModelItem) => {
setType(null)
setOpen(true)
getData(vo)
}
/** Fetch model data for provider */
const getData = (vo: ProviderModelItem) => {
if (!vo.provider) return
@@ -43,9 +64,11 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
setList(response[0].models)
})
}
/** Open key configuration modal */
const handleKeyConfig = (vo: ModelListItem) => {
multiKeyConfigModalRef.current?.handleOpen(vo, data.provider)
}
/** Toggle model active status */
const handleChange = (vo: ModelListItem) => {
setLoading(true)
updateModelStatus(vo.id, { is_active: !vo.is_active })
@@ -55,22 +78,27 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
})
}
/** Close drawer */
const handleClose = () => {
setType(null)
setOpen(false)
refresh?.()
}
/** Refresh model list */
const handleRefresh = () => {
getData(data)
}
/** Handle type filter change */
const handleTypeChange = (value: string) => {
setType(value)
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));
/** Filter models by selected type */
const filterList = useMemo(() => {
if (!type) return list
return list.filter(vo => vo.type === type)

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

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:54:26
*/
/**
* Model Square Detail Drawer
* Displays all models from a specific provider in the model square
* Allows adding models and editing custom models
*/
import { useState, useImperativeHandle, forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
@@ -11,10 +23,19 @@ import Tag from '@/components/Tag';
import PageEmpty from '@/components/Empty/PageEmpty';
import { getLogoUrl } from '../utils'
/**
* Component props
*/
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 { t } = useTranslation();
const { message } = App.useApp()
@@ -23,15 +44,18 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
const [list, setList] = useState<ModelPlazaItem[]>([])
/** Open drawer with model plaza data */
const handleOpen = (vo: ModelPlaza) => {
setModel(vo)
setOpen(true)
getList(vo)
}
/** Close drawer */
const handleClose = () => {
setOpen(false)
refresh()
}
/** Fetch model list for provider */
const getList = (vo: ModelPlaza) => {
getModelPlaza({ provider: vo.provider })
.then(res => {
@@ -39,6 +63,7 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
setList(response.length > 0 ? response[0].models : [])
})
}
/** Add model to workspace */
const handleAdd = (item: ModelPlazaItem) => {
addModelPlaza(item.id)
.then(() => {
@@ -47,6 +72,7 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
})
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

22
web/src/views/ModelManagement/components/MultiKeyConfigModal.tsx
View File

@@ -1,10 +1,26 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:55
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:55
*/
/**
* Multi-Key Configuration Modal
* Modal for managing multiple API keys for a single model
* Allows adding and removing API keys
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ModelListItem, MultiKeyForm, MultiKeyConfigModalRef, MultiKeyConfigModalProps } from '../types';
import RbModal from '@/components/RbModal'
import { addModelApiKey, deleteModelApiKey, getModelInfo } from '@/api/models'
/**
* Multi-key configuration modal component
*/
const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigModalProps>(({ refresh }, ref) => {
const { t } = useTranslation();
const { message } = App.useApp();
@@ -13,6 +29,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
const [form] = Form.useForm<MultiKeyForm>();
const [loading, setLoading] = useState(false)
/** Close modal and refresh parent */
const handleClose = () => {
setModel({} as ModelListItem);
refresh?.()
@@ -22,11 +39,13 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
setVisible(false);
};
/** Open modal with model data */
const handleOpen = (vo: ModelListItem) => {
setVisible(true);
getData(vo)
};
/** Fetch model information */
const getData = (vo: ModelListItem) => {
if (!vo.id) return
@@ -35,6 +54,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
setModel(res as ModelListItem)
})
}
/** Add new API key */
const handleSave = () => {
form
.validateFields()
@@ -58,6 +78,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
console.log('err', err)
});
}
/** Delete API key */
const handleDelete = (api_key_id: string) => {
deleteModelApiKey(api_key_id)
.then(() => {
@@ -66,6 +87,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
})
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));