fix: 资源选择组件编辑时不能显示已选中的

react-ui/src/components/ParameterInput/index.tsx

@@ -1,21 +1,22 @@
 /*
  * @Author: 赵伟
  * @Date: 2024-04-16 08:42:57
- * @Description: 参数输入组件
+ * @Description: 参数输入组件，支持手动输入，选择全局参数，选择数据集/模型/镜像
  */
 
+import { CommonTabKeys } from '@/enums';
 import { CloseOutlined } from '@ant-design/icons';
 import { Form, Input } from 'antd';
 import { RuleObject } from 'antd/es/form';
 import classNames from 'classnames';
 import './index.less';
 
-// 对象
+// 如果值是对象时的类型
 export type ParameterInputObject = {
   value?: any; // 值
   showValue?: any; // 显示值
   fromSelect?: boolean; // 是否来自选择
-  activeTab?: string; // 选择镜像、数据集、模型时，保存当前激活的tab
+  activeTab?: CommonTabKeys; // 选择镜像、数据集、模型时，保存当前激活的tab
   expandedKeys?: string[]; // 选择镜像、数据集、模型时，保存展开的keys
   checkedKeys?: string[]; // 选择镜像、数据集、模型时，保存选中的keys
   [key: string]: any;

react-ui/src/components/ParameterSelect/index.tsx

@@ -1,7 +1,7 @@
 /*
  * @Author: 赵伟
  * @Date: 2024-04-16 08:42:57
- * @Description: 参数选择组件
+ * @Description: 参数下拉选择组件，支持资源规格、数据集、模型、服务
  */
 
 import { PipelineNodeModelParameter } from '@/types';

react-ui/src/components/ResourceSelect/index.tsx

@@ -12,7 +12,8 @@ import ResourceSelectorModal, {
 } from '@/pages/Pipeline/components/ResourceSelectorModal';
 import { openAntdModal } from '@/utils/modal';
 import { Button } from 'antd';
-import { useState } from 'react';
+import { pick } from 'lodash';
+import { useEffect, useState } from 'react';
 import ParameterInput, { type ParameterInputProps } from '../ParameterInput';
 import './index.less';
 
@@ -33,6 +34,31 @@ function ResourceSelect({ type, value, onChange, disabled, ...rest }: ResourceSe
     undefined,
   );
 
+  useEffect(() => {
+    if (
+      value &&
+      typeof value === 'object' &&
+      value.activeTab &&
+      value.id &&
+      value.name &&
+      value.version &&
+      value.path &&
+      (type === ResourceSelectorType.Mirror || value.identifier) &&
+      (type === ResourceSelectorType.Mirror || value.owner)
+    ) {
+      const originResource = pick(value, [
+        'activeTab',
+        'id',
+        'identifier',
+        'name',
+        'owner',
+        'version',
+        'path',
+      ]) as ResourceSelectorResponse;
+      setSelectedResource(originResource);
+    }
+  }, [value]);
+
   const selectResource = () => {
     const resource = selectedResource;
     const { close } = openAntdModal(ResourceSelectorModal, {
@@ -50,8 +76,10 @@ function ResourceSelect({ type, value, onChange, disabled, ...rest }: ResourceSe
               showValue: path,
               fromSelect: true,
               activeTab,
-              expandedKeys: [`${id}`],
-              checkedKeys: [`${id}-${version}`],
+              id,
+              name,
+              version,
+              path,
             });
           } else {
             const jsonObj = {
@@ -69,8 +97,6 @@ function ResourceSelect({ type, value, onChange, disabled, ...rest }: ResourceSe
               showValue,
               fromSelect: true,
               activeTab,
-              expandedKeys: [`${id}`],
-              checkedKeys: [`${id}-${version}`],
               ...jsonObj,
             });
           }
@@ -80,8 +106,6 @@ function ResourceSelect({ type, value, onChange, disabled, ...rest }: ResourceSe
             showValue: undefined,
             fromSelect: false,
             activeTab: undefined,
-            expandedKeys: [],
-            checkedKeys: [],
           });
         }
         close();

react-ui/src/pages/Dataset/components/VersionCompareModal/index.less

@@ -3,6 +3,7 @@
 .title(@color, @background) {
   width: 100%;
   margin-bottom: 20px;
+  padding: 0 15px;
   color: @color;
   font-weight: 500;
   font-size: @font-size;

react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.less

@@ -3,6 +3,7 @@
 .title(@color, @background) {
   width: 100%;
   margin-bottom: 20px;
+  padding: 0 15px;
   color: @color;
   font-weight: 500;
   font-size: @font-size;

react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx

@@ -18,13 +18,13 @@ export { ResourceSelectorType, selectorTypeConfig };
 
 // 选择数据集\模型\镜像的返回类型
 export type ResourceSelectorResponse = {
+  activeTab: CommonTabKeys; // 是我的还是公开的
   id: string; // 数据集\模型\镜像 id
   name: string; // 数据集\模型\镜像 name
   version: string; // 数据集\模型\镜像版本
   path: string; // 数据集\模型\镜像版本路径
-  identifier: string; // 数据集\模型 identifier
-  owner: string; // 数据集\模型 owner
-  activeTab: CommonTabKeys; // 是我的还是公开的
+  identifier: string; // 数据集\模型 identifier，镜像没有这个字段
+  owner: string; // 数据集\模型 owner，镜像没有这个字段
 };
 
 export interface ResourceSelectorModalProps extends Omit<ModalProps, 'onOk'> {
@@ -69,7 +69,7 @@ function ResourceSelectorModal({
   onOk,
   ...rest
 }: ResourceSelectorModalProps) {
-  const [activeTab, setActiveTab] = useState<string>(defaultActiveTab);
+  const [activeTab, setActiveTab] = useState<CommonTabKeys>(defaultActiveTab);
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
   const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
   const [loadedKeys, setLoadedKeys] = useState<React.Key[]>([]);
@@ -234,7 +234,7 @@ function ResourceSelectorModal({
         version,
         identifier,
         owner,
-        activeTab: activeTab as CommonTabKeys,
+        activeTab: activeTab,
       };
       onOk?.(res);
     } else {
@@ -255,7 +255,7 @@ function ResourceSelectorModal({
         <Tabs
           activeKey={activeTab}
           items={tabItems}
-          onChange={setActiveTab}
+          onChange={(e) => setActiveTab(e as CommonTabKeys)}
           className={styles['model-tabs']}
         />
         <div className={styles['model-selector']}>