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

2026-02-03 18:38:04 +08:00
parent a191e32f71
commit 9e195ea63b
155 changed files with 4169 additions and 586 deletions
--- a/web/src/views/ModelManagement/Group.tsx
+++ b/web/src/views/ModelManagement/Group.tsx
@@ -1,3 +1,15 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:50:00 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:50:00 
+ */
+/**
+ * Group Model View
+ * Displays composite/group models in card grid layout
+ * Supports filtering and configuration
+ */
+
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import clsx from 'clsx'
 import { Button } from 'antd'
@@ -9,12 +21,16 @@ import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import { formatDateTime } from '@/utils/format';

+/**
+ * Group model list component
+ */
 const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem) => void; }>(({ query, handleEdit }, ref) => {
  const { t } = useTranslation();
  const [list, setList] = useState<ModelListItem[]>([])
  useEffect(() => {
    getList()
  }, [query])
+  /** Fetch group model list */
  const getList = () => {
    getModelNewList({
      ...query,
@@ -26,6 +42,7 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
        setList(response[0]?.models || [])
      })
  }
+  /** Format model data for display */
  const formatData = (data: ModelListItem) => {
    return [
      {
@@ -46,6 +63,7 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
    ]
  }

+  /** Expose methods to parent component */
  useImperativeHandle(ref, () => ({
    getList,
  }));
--- a/web/src/views/ModelManagement/List.tsx
+++ b/web/src/views/ModelManagement/List.tsx
@@ -1,3 +1,15 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:50:10 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:50:10 
+ */
+/**
+ * Model List View
+ * Displays models grouped by provider with key configuration
+ * Shows model tags and allows viewing model details
+ */
+
 import { useRef, useState, useEffect, type FC } from 'react';
 import { Button, Flex, Row, Col } from 'antd'
 import { useTranslation } from 'react-i18next';
@@ -11,6 +23,9 @@ import KeyConfigModal from './components/KeyConfigModal'
 import ModelListDetail from './components/ModelListDetail'
 import { getLogoUrl } from './utils'

+/**
+ * Model list component
+ */
 const ModelList: FC<{ query: any }> = ({ query }) => {
  const { t } = useTranslation();
  const keyConfigModalRef = useRef<KeyConfigModalRef>(null)
@@ -19,6 +34,7 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
  useEffect(() => {
    getList()
  }, [query])
+  /** Fetch model list grouped by provider */
  const getList = () => {
    getModelNewList({
      ...query,
@@ -29,9 +45,11 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
      })
  }

+  /** Open model detail drawer */
  const handleShowModel = (vo: ProviderModelItem) => {
    modelListDetailRef.current?.handleOpen(vo)
  }
+  /** Open key configuration modal */
  const handleKeyConfig = (vo: ProviderModelItem) => {
    keyConfigModalRef.current?.handleOpen(vo)
  }
--- a/web/src/views/ModelManagement/Square.tsx
+++ b/web/src/views/ModelManagement/Square.tsx
@@ -1,3 +1,15 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:50:14 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:50:14 
+ */
+/**
+ * Model Square View
+ * Displays public model marketplace grouped by provider
+ * Allows adding models and viewing details
+ */
+
 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { Button, Space, App, Divider, Flex, Tooltip } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
@@ -11,6 +23,9 @@ import Tag from '@/components/Tag';
 import ModelSquareDetail from './components/ModelSquareDetail'
 import { getLogoUrl } from './utils'

+/**
+ * Model square component
+ */
 const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPlazaItem) => void; }>(({ query, handleEdit }, ref) => {
  const { t } = useTranslation();
  const { message } = App.useApp()
@@ -19,6 +34,7 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
  useEffect(() => {
    getList()
  }, [query])
+  /** Fetch model plaza list */
  const getList = () => {
    getModelPlaza(query)
      .then(res => {
@@ -26,9 +42,11 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
      })
  }

+  /** Open model detail drawer */
  const handleMore = (vo: ModelPlaza) => {
    modelSquareDetailRef.current?.handleOpen(vo)
  }
+  /** Add model to workspace */
  const handleAdd = (item: ModelPlazaItem) => {
    addModelPlaza(item.id)
      .then(() => {
@@ -37,6 +55,7 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
      })
  }

+  /** Expose methods to parent component */
  useImperativeHandle(ref, () => ({
    getList,
  }));
--- a/web/src/views/ModelManagement/components/CustomModelModal.tsx
+++ b/web/src/views/ModelManagement/components/CustomModelModal.tsx
@@ -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,
  }));
--- a/web/src/views/ModelManagement/components/GroupModelModal.tsx
+++ b/web/src/views/ModelManagement/components/GroupModelModal.tsx
@@ -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
--- a/web/src/views/ModelManagement/components/KeyConfigModal.tsx
+++ b/web/src/views/ModelManagement/components/KeyConfigModal.tsx
@@ -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
--- a/web/src/views/ModelManagement/components/ModelImplement/SubModelModal.tsx
+++ b/web/src/views/ModelManagement/components/ModelImplement/SubModelModal.tsx
@@ -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,
  }));
--- a/web/src/views/ModelManagement/components/ModelImplement/index.tsx
+++ b/web/src/views/ModelManagement/components/ModelImplement/index.tsx
@@ -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] = [];
--- a/web/src/views/ModelManagement/components/ModelImplement/types.ts
+++ b/web/src/views/ModelManagement/components/ModelImplement/types.ts
@@ -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[]>
 }
--- a/web/src/views/ModelManagement/components/ModelListDetail.tsx
+++ b/web/src/views/ModelManagement/components/ModelListDetail.tsx
@@ -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)
--- a/web/src/views/ModelManagement/components/ModelSquareDetail.tsx
+++ b/web/src/views/ModelManagement/components/ModelSquareDetail.tsx
@@ -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,
  }));
--- a/web/src/views/ModelManagement/components/MultiKeyConfigModal.tsx
+++ b/web/src/views/ModelManagement/components/MultiKeyConfigModal.tsx
@@ -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,
  }));
--- a/web/src/views/ModelManagement/index.tsx
+++ b/web/src/views/ModelManagement/index.tsx
@@ -1,3 +1,15 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:50:05 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:50:05 
+ */
+/**
+ * Model Management Main Page
+ * Manages AI models with three views: group models, model list, and model square
+ * Supports filtering, searching, and CRUD operations
+ */
+
 import { useState, useRef, type FC } from 'react';
 import { Button, Flex, Space, type SegmentedProps, Form } from 'antd'
 import { useTranslation } from 'react-i18next';
@@ -13,8 +25,14 @@ import CustomModelModal from './components/CustomModelModal'
 import CustomSelect from '@/components/CustomSelect'
 import { modelTypeUrl, modelProviderUrl } from '@/api/models'

+/**
+ * Available tab keys
+ */
 const tabKeys = ['group', 'list', 'square']
-const ModelManagement: FC = () => {
+
+/**
+ * Model management main component
+ */const ModelManagement: FC = () => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState('group');
  const configModalRef = useRef<GroupModelModalRef>(null)
@@ -24,17 +42,20 @@ const ModelManagement: FC = () => {
  const [form] = Form.useForm<Query>()
  const query = Form.useWatch([], form)

+  /** Format tab items with translations */
  const formatTabItems = () => {
    return tabKeys.map(value => ({
      value,
      label: t(`modelNew.${value}`),
    }))
  }
+  /** Handle tab change */
  const handleChangeTab = (value: SegmentedProps['value']) => {
    setActiveTab(value as string);
    form.resetFields()
  }

+  /** Open edit modal based on active tab */
  const handleEdit = (vo?: ModelListItem | ModelPlazaItem) => {
    switch(activeTab) {
      case 'group':
@@ -45,6 +66,7 @@ const ModelManagement: FC = () => {
        break
    }
  }
+  /** Refresh list based on active tab */
  const handleRefresh = () => {
    switch (activeTab) {
      case 'group':
--- a/web/src/views/ModelManagement/types.ts
+++ b/web/src/views/ModelManagement/types.ts
@@ -1,139 +1,315 @@
-export interface Query {
-  type?: string;
-  provider?: string;
-  is_active?: boolean;
-  is_public?: boolean;
-  is_composite?: boolean;
-  search?: string;
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:50:18 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:50:18 
+ */
+/**
+ * Type definitions for Model Management
+ */

+/**
+ * Query parameters for model filtering
+ */
+export interface Query {
+  /** Model type filter */
+  type?: string;
+  /** Model provider filter */
+  provider?: string;
+  /** Active status filter */
+  is_active?: boolean;
+  /** Public status filter */
+  is_public?: boolean;
+  /** Composite model filter */
+  is_composite?: boolean;
+  /** Search keyword */
+  search?: string;
+  /** Page size */
  pagesize?: number;
+  /** Page number */
  page?: number;
 }
+
+/**
+ * Description item for model details
+ */
 export interface DescriptionItem {
+  /** Item key */
  key: string;
+  /** Item label */
  label: string;
+  /** Item content */
  children: string;
 }
+
+/**
+ * Composite model form data
+ */
 export interface CompositeModelForm {
+  /** Model logo */
  logo?: any;
+  /** Model name */
  name: string;
+  /** Model type */
  type?: string;
+  /** Model description */
  description: string;
+  /** Associated API key IDs */
  api_key_ids: ModelApiKey[] | string[];
 }
+
+/**
+ * Group model modal ref interface
+ */
 export interface GroupModelModalRef {
+  /** Open modal with optional model data */
  handleOpen: (model?: ModelListItem) => void;
 }
+
+/**
+ * Group model modal props
+ */
 export interface GroupModelModalProps {
+  /** Callback to refresh model list */
  refresh?: () => void;
 }
+
+/**
+ * Model list detail ref interface
+ */
 export interface ModelListDetailRef {
+  /** Open detail drawer with provider model data */
  handleOpen: (vo: ProviderModelItem) => void;
 }

-
+/**
+ * Model API key configuration
+ */
 export interface ModelApiKey {
+  /** Model name */
  model_name: string;
+  /** API key description */
  description: string | null;
+  /** Model provider */
  provider: string;
+  /** API key value */
  api_key: string;
+  /** API base URL */
  api_base: string;
+  /** Additional configuration */
  config: any;
+  /** Whether API key is active */
  is_active: boolean;
+  /** Priority level */
  priority: string;
+  /** API key ID */
  id: string;
+  /** Usage count */
  usage_count: string;
+  /** Last used timestamp */
  last_used_at: number;
+  /** Creation timestamp */
  created_at: number;
+  /** Update timestamp */
  updated_at: number;
+  /** Associated model config IDs */
  model_config_ids: string[];
 }
+
+/**
+ * Model list item data structure
+ */
 export interface ModelListItem {
+  /** Model name */
  model_name?: string;
+  /** Associated model config IDs */
  model_config_ids: string[];
+  /** Display name */
  name: string;
+  /** Model type */
  type: string;
+  /** Model logo URL */
  logo: string;
+  /** Model description */
  description: string;
+  /** Model provider */
  provider: string;
+  /** Model configuration */
  config: any;
+  /** Whether model is active */
  is_active: boolean;
+  /** Whether model is public */
  is_public: boolean;
+  /** Model ID */
  id: string;
+  /** Creation timestamp */
  created_at: number;
+  /** Update timestamp */
  updated_at: number;
+  /** Associated API keys */
  api_keys: ModelApiKey[]
 }
+
+/**
+ * Provider model item grouping
+ */
 export interface ProviderModelItem {
+  /** Provider name */
  provider: string;
+  /** Provider logo URL */
  logo?: string;
+  /** Provider tags */
  tags: string[];
+  /** Models from this provider */
  models: ModelListItem[];
 }
+
+/**
+ * Key configuration modal form data
+ */
 export interface KeyConfigModalForm {
+  /** Model provider */
  provider: string;
+  /** API key value */
  api_key: string;
+  /** API base URL */
  api_base: string;
 }
+
+/**
+ * Key configuration modal ref interface
+ */
 export interface KeyConfigModalRef {
+  /** Open modal with provider model data */
  handleOpen: (vo: ProviderModelItem) => void;
 }
+
+/**
+ * Key configuration modal props
+ */
 export interface KeyConfigModalProps {
+  /** Callback to refresh model list */
  refresh?: () => void;
 }
+
+/**
+ * Multi-key configuration form data
+ */
 export interface MultiKeyForm {
+  /** Model config ID */
  model_config_id?: string;
+  /** Model name */
  model_name: string;
+  /** Model provider */
  provider: string;
+  /** API key value */
  api_key: string;
+  /** API base URL */
  api_base: string;
 }

+/**
+ * Multi-key configuration modal ref interface
+ */
 export interface MultiKeyConfigModalRef {
+  /** Open modal with model data */
  handleOpen: (vo: ModelListItem, provider?: string) => void;
 }
+
+/**
+ * Multi-key configuration modal props
+ */
 export interface MultiKeyConfigModalProps {
+  /** Callback to refresh model list */
  refresh?: () => void;
 }

-
+/**
+ * Model plaza grouping by provider
+ */
 export interface ModelPlaza {
+  /** Provider name */
  provider: string;
+  /** Models from this provider */
  models: ModelPlazaItem[];
 }
+
+/**
+ * Model plaza item data structure
+ */
 export interface ModelPlazaItem {
+  /** Model ID */
  id: string;
+  /** Model name */
  name: string;
+  /** Model type */
  type: string;
+  /** Model provider */
  provider: string;
+  /** Model logo URL */
  logo: string;
+  /** Model description */
  description: string;
+  /** Whether model is deprecated */
  is_deprecated: boolean;
+  /** Whether model is official */
  is_official: boolean;
+  /** Model tags */
  tags: string[];
+  /** Number of times added */
  add_count: number;
+  /** Whether user has added this model */
  is_added: boolean;
 }
+
+/**
+ * Model square detail ref interface
+ */
 export interface ModelSquareDetailRef {
+  /** Open detail drawer with model plaza data */
  handleOpen: (vo: ModelPlaza) => void;
 }
+
+/**
+ * Custom model form data
+ */
 export interface CustomModelForm {
+  /** Model name */
  name: string;
+  /** Model type */
  type?: string;
+  /** Model provider */
  provider?: string;
+  /** Model logo */
  logo?: any;
+  /** Model description */
  description: string;
+  /** Whether model is official */
  is_official: boolean;
+  /** Model tags */
  tags: string[];
 }
+
+/**
+ * Custom model modal ref interface
+ */
 export interface CustomModelModalRef {
+  /** Open modal with optional model plaza item */
  handleOpen: (vo?: ModelPlazaItem) => void;
 }
+
+/**
+ * Custom model modal props
+ */
 export interface CustomModelModalProps {
+  /** Callback to refresh model list */
  refresh?: () => void;
 }

-
+/**
+ * Base ref interface for list components
+ */
 export interface BaseRef {
+  /** Refresh list data */
  getList: () => void;
 }
--- a/web/src/views/ModelManagement/utils.ts
+++ b/web/src/views/ModelManagement/utils.ts
@@ -1,3 +1,13 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:50:22 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 16:50:22 
+ */
+/**
+ * Utility functions for Model Management
+ */
+
 import bedrockIcon from '@/assets/images/model/bedrock.svg'
 import dashscopeIcon from '@/assets/images/model/dashscope.png'
 import gpustackIcon from '@/assets/images/model/gpustack.png'
@@ -5,6 +15,9 @@ import ollamaIcon from '@/assets/images/model/ollama.svg'
 import openaiIcon from '@/assets/images/model/openai.svg'
 import xinferenceIcon from '@/assets/images/model/xinference.svg'

+/**
+ * Provider icon mapping
+ */
 export const ICONS = {
  bedrock: bedrockIcon,
  dashscope: dashscopeIcon,
@@ -14,6 +27,11 @@ export const ICONS = {
  xinference: xinferenceIcon
 }

+/**
+ * Get logo URL from provider name or URL
+ * @param logo - Provider name or logo URL
+ * @returns Logo URL or undefined
+ */
 export const getLogoUrl = (logo?: string) => {
  if (!logo) {
    return undefined