fix(web): model bugfix

web/src/views/ModelManagement/components/ModelImplement/SubModelModal.tsx

@@ -1,5 +1,5 @@
-import { forwardRef, useImperativeHandle, useState } from 'react';
-import { Form, Cascader, App } from 'antd';
+import { forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
+import { Form, Cascader, App, type CascaderProps } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import type { SubModelModalForm, SubModelModalRef, SubModelModalProps, ModelList } from './types';
@@ -18,7 +18,8 @@ interface Option {
 }
 const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
   refresh,
-  type
+  type,
+  groupedByProvider
 }, ref) => {
   const { t } = useTranslation();
   const { message } = App.useApp()
@@ -26,28 +27,27 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
   const [form] = Form.useForm<SubModelModalForm>();
   const [selecteds, setSelecteds] = useState<any[]>([])
   const [modelList, setModelList] = useState<Option[]>([])
+  const provider = Form.useWatch(['provider'], form)
+
+  useEffect(() => {
+    if (provider && groupedByProvider) {
+      const lastModels = groupedByProvider[provider] || []
+      const list = lastModels.map(vo => [{ name: vo.model_name, id: vo.model_config_ids[0], value: vo.model_config_ids[0], provider }, { value: vo.id }])
+      setSelecteds(list)
+      form.setFieldValue('api_key_ids', lastModels.map(vo => [vo.model_config_ids[0], vo.id]))
+    }
+  }, [groupedByProvider, provider])
 
   // 封装取消方法，添加关闭弹窗逻辑
   const handleClose = () => {
     form.resetFields();
     setVisible(false);
     setSelecteds([])
+    setModelList([])
   };
 
-  const handleOpen = (list?: ModelList[], provider?: string) => {
-    if (list?.length && provider) {
-      const initialValue: SubModelModalForm = {
-        provider,
-        api_key_ids: list.map(vo => {
-          return [vo.model_config_ids[0], vo.id]
-        })
-      }
-
-      form.setFieldsValue(initialValue);
-      handleChangeProvider(provider, initialValue.api_key_ids)
-    } else {
-      form.resetFields()
-    }
+  const handleOpen = () => {
+    form.resetFields()
     setVisible(true);
   };
   // 封装保存方法，添加提交逻辑
@@ -67,7 +67,6 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
   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)
-    console.log('onchange', value, lastFilterLit, selectedOptions, filterList)
     if (filterList.length) {
       message.warning(`【${filterList.map(vo => vo.label)}】${t('modelNew.selectOneTip')}`)
       form.setFieldValue('api_key_ids', lastFilterLit)
@@ -77,35 +76,51 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
 
   const handleChangeProvider = (provider: string, api_key_ids?: any[]) => {
     form.setFieldValue('api_key_ids', undefined)
-    getModelNewList({
-      provider: provider,
-      is_composite: false,
-      is_active: true,
-      type
-    })
-      .then(res => {
-        const response = res as ProviderModelItem[]
-        const list = response[0]?.models || []
-        setModelList(list.map(vo => {
-          const children = vo.api_keys.map(item => ({
-            label: item.api_key,
-            value: item.id,
-          }))
-          return {
-            ...vo,
-            label: vo.name,
-            value: vo.id,
-            children: children
-          }
-        }))
-
-        if (api_key_ids?.length) {
-          form.setFieldsValue({
-            api_key_ids: api_key_ids
-          })
-        }
+    if (provider) {
+      getModelNewList({
+        provider: provider,
+        is_composite: false,
+        is_active: true,
+        type
       })
+        .then(res => {
+          const response = res as ProviderModelItem[]
+          const list = response[0]?.models || []
+          setModelList(list.map(vo => {
+            const children = vo.api_keys.map(item => ({
+              label: item.api_key,
+              value: item.id,
+            }))
+            return {
+              ...vo,
+              label: vo.name,
+              value: vo.id,
+              children: children
+            }
+          }))
+
+          if (api_key_ids?.length) {
+            form.setFieldsValue({
+              api_key_ids: api_key_ids
+            })
+          }
+        })
+    } else {
+      setModelList([])
+    }
   }
+  const displayRender: CascaderProps<Option>['displayRender'] = (labels, selectedOptions = []) =>
+    labels.map((label, i) => {
+      const option = selectedOptions[i];
+      if (i === labels.length - 1) {
+        return (
+          <span key={option?.value || i}>
+            {label}
+          </span>
+        );
+      }
+      return <span key={option?.value || i}>{label} / </span>;
+    });
 
   // 暴露给父组件的方法
   useImperativeHandle(ref, () => ({
@@ -154,6 +169,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
             className="rb:w-full!"
             showCheckedStrategy={SHOW_CHILD}
             changeOnSelect
+            displayRender={displayRender}
           />
         </Form.Item>
       </Form>