From 204ffb1ca3b802197ac31fc7fe6f267ba1a5dc16 Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Thu, 2 Jan 2025 10:40:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=9B=86=E5=92=8C=E6=A8=A1=E5=9E=8B=E5=AF=B9=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/assets/img/dataset-version.png   | Bin 0 -> 5059 bytes
 .../components/AddCodeConfigModal/index.tsx   |   2 +-
 .../Dataset/components/CategoryItem/index.tsx |   1 -
 .../Dataset/components/ResourceInfo/index.tsx |  34 ++-
 .../components/ResourceIntro/index.tsx        |  10 +-
 .../components/VersionCompareModal/index.less | 120 +++++++++
 .../components/VersionCompareModal/index.tsx  | 236 ++++++++++++++++++
 .../VersionSelectorModal/index.less           |  59 +++++
 .../components/VersionSelectorModal/index.tsx |  63 +++++
 react-ui/src/pages/Dataset/config.tsx         |   5 +
 .../Model/components/ModelMetrics/index.tsx   |  13 +-
 .../components/VersionCompareModal/index.tsx  |   9 +-
 react-ui/src/services/dataset/index.js        |  16 ++
 react-ui/tests/date.test.ts                   |  23 ++
 14 files changed, 571 insertions(+), 20 deletions(-)
 create mode 100644 react-ui/src/assets/img/dataset-version.png
 create mode 100644 react-ui/src/pages/Dataset/components/VersionCompareModal/index.less
 create mode 100644 react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx
 create mode 100644 react-ui/src/pages/Dataset/components/VersionSelectorModal/index.less
 create mode 100644 react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx
 create mode 100644 react-ui/tests/date.test.ts

diff --git a/react-ui/src/assets/img/dataset-version.png b/react-ui/src/assets/img/dataset-version.png
new file mode 100644
index 0000000000000000000000000000000000000000..c17d46cf8eeda672cdc41b3d6796bd2280cf9dd9
GIT binary patch
literal 5059
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
Z{{SyxGc+G_x%U77002ovPDHLkV1g|ltgQe5

literal 0
HcmV?d00001

diff --git a/react-ui/src/pages/CodeConfig/components/AddCodeConfigModal/index.tsx b/react-ui/src/pages/CodeConfig/components/AddCodeConfigModal/index.tsx
index ce4deafd..6e621086 100644
--- a/react-ui/src/pages/CodeConfig/components/AddCodeConfigModal/index.tsx
+++ b/react-ui/src/pages/CodeConfig/components/AddCodeConfigModal/index.tsx
@@ -93,7 +93,7 @@ function AddCodeConfigModal({ opType, codeConfigData, onOk, ...rest }: AddCodeCo
   return (
     <KFModal
       {...rest}
-      title="新建代码配置"
+      title={opType === OperationType.Create ? '新建代码配置' : '修改代码配置'}
       image={require('@/assets/img/create-experiment.png')}
       width={825}
       okButtonProps={{
diff --git a/react-ui/src/pages/Dataset/components/CategoryItem/index.tsx b/react-ui/src/pages/Dataset/components/CategoryItem/index.tsx
index 2c2d6878..08398e56 100644
--- a/react-ui/src/pages/Dataset/components/CategoryItem/index.tsx
+++ b/react-ui/src/pages/Dataset/components/CategoryItem/index.tsx
@@ -39,7 +39,6 @@ function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemP
       >
         {item.name}
       </Typography.Text>
-      {/* <span className={styles['category-item__name']}>{item.name}</span> */}
     </div>
   );
 }
diff --git a/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx b/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx
index 1037e1b9..c0bfdb33 100644
--- a/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx
+++ b/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx
@@ -22,6 +22,8 @@ import { useEffect, useState } from 'react';
 import AddVersionModal from '../AddVersionModal';
 import ResourceIntro from '../ResourceIntro';
 import ResourceVersion from '../ResourceVersion';
+import VersionCompareModal from '../VersionCompareModal';
+import VersionSelectorModal from '../VersionSelectorModal';
 import styles from './index.less';
 
 // 这里值小写是因为值会写在 url 中
@@ -47,7 +49,7 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
   const name = searchParams.get('name') || '';
   const owner = searchParams.get('owner') || '';
   const identifier = searchParams.get('identifier') || '';
-  const is_public = searchParams.get('is_public') || '';
+  const is_public = (searchParams.get('is_public') || '') === 'true';
   const [versionList, setVersionList] = useState<ResourceVersionData[]>([]);
   const [version, setVersion] = useState<string | undefined>(undefined);
   const [activeTab, setActiveTab] = useState<string>(defaultTab);
@@ -67,7 +69,7 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
         name,
         identifier,
         version,
-        is_public: is_public === 'true',
+        is_public: is_public,
       });
     }
   }, [version]);
@@ -121,7 +123,7 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
       resoureName: info.name,
       owner: info.owner,
       identifier: info.identifier,
-      is_public: info.is_public,
+      is_public: is_public,
       onOk: () => {
         getVersionList();
         close();
@@ -129,6 +131,29 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
     });
   };
 
+  // 选择版本
+  const showVersionSelector = () => {
+    const { close } = openAntdModal(VersionSelectorModal, {
+      versions: versionList,
+      onOk: (version: string[]) => {
+        showVersionComparison(version);
+        close();
+      },
+    });
+  };
+
+  // 版本对比
+  const showVersionComparison = (versions: string[]) => {
+    openAntdModal(VersionCompareModal, {
+      versions: versions,
+      resourceType: resourceType,
+      repo_id: resourceId,
+      owner: info.owner,
+      identifier: info.identifier,
+      is_public: is_public,
+    });
+  };
+
   // 版本变化
   const handleVersionChange = (value: string) => {
     setVersion(value);
@@ -237,6 +262,9 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
           <Button type="default" onClick={showModal} icon={<KFIcon type="icon-xinjian2" />}>
             创建新版本
           </Button>
+          <Button type="default" style={{ marginLeft: '20px' }} onClick={showVersionSelector}>
+            版本对比
+          </Button>
           <Button
             type="default"
             style={{ marginLeft: 'auto', marginRight: 0 }}
diff --git a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx
index e30dfa5d..b0bad9de 100644
--- a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx
+++ b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx
@@ -24,7 +24,7 @@ type ResourceIntroProps = {
   version?: string;
 };
 
-const formatDataset = (datasets?: DatasetData[]) => {
+export const formatDataset = (datasets?: DatasetData[]) => {
   if (!datasets || datasets.length === 0) {
     return undefined;
   }
@@ -34,7 +34,7 @@ const formatDataset = (datasets?: DatasetData[]) => {
   }));
 };
 
-const getProjectUrl = (project?: ProjectDependency) => {
+export const getProjectUrl = (project?: ProjectDependency) => {
   if (!project || !project.url || !project.branch) {
     return undefined;
   }
@@ -42,7 +42,7 @@ const getProjectUrl = (project?: ProjectDependency) => {
   return getGitUrl(url, branch);
 };
 
-const formatProject = (project?: ProjectDependency) => {
+export const formatProject = (project?: ProjectDependency) => {
   if (!project) {
     return undefined;
   }
@@ -52,7 +52,7 @@ const formatProject = (project?: ProjectDependency) => {
   };
 };
 
-const formatTrainTask = (task?: TrainTask) => {
+export const formatTrainTask = (task?: TrainTask) => {
   if (!task) {
     return undefined;
   }
@@ -62,7 +62,7 @@ const formatTrainTask = (task?: TrainTask) => {
   };
 };
 
-const formatSource = (source?: string) => {
+export const formatSource = (source?: string) => {
   if (source === DataSource.Create) {
     return '用户上传';
   } else if (source === DataSource.HandExport) {
diff --git a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less
new file mode 100644
index 00000000..70de3494
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less
@@ -0,0 +1,120 @@
+@purple-color: #6516ff;
+
+.title(@color, @background) {
+  width: 100%;
+  margin-bottom: 20px;
+  color: @color;
+  font-weight: 500;
+  font-size: @font-size;
+  line-height: 42px;
+  text-align: center;
+  background: @background;
+  border-radius: 4px 4px 0 0;
+  .singleLine();
+}
+
+.text() {
+  margin-bottom: 20px !important;
+  color: @text-color-secondary;
+  font-size: 13px;
+  line-height: 22px;
+  word-break: break-all;
+  .singleLine();
+}
+
+.version-container(@background) {
+  flex: 1;
+  min-width: 0;
+  background: @background;
+  border-radius: 4px;
+}
+
+.version-compare {
+  :global {
+    .ant-modal-content {
+      padding: 40px 40px 25px !important;
+    }
+    .ant-modal-header {
+      margin-bottom: 20px !important;
+    }
+    .kf-modal-title {
+      color: @text-color;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+
+  &__container {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0 5px;
+    align-items: stretch;
+    height: 100%;
+  }
+
+  &__fields {
+    flex: none;
+    width: 117px;
+    padding: 0 15px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid .addAlpha(@primary-color, 0.2) [];
+    border-radius: 4px;
+    box-shadow: 0px 3px 6px .addAlpha(@primary-color, 0.1) [] inset;
+
+    &__title {
+      margin-bottom: 20px;
+      color: @text-color;
+      font-size: @font-size;
+      line-height: 42px;
+    }
+    &__text {
+      .text();
+
+      &--different {
+        color: @error-color;
+      }
+    }
+  }
+
+  &__left {
+    .version-container(.addAlpha(@primary-color, 0.04) []);
+
+    &__title {
+      .title(@primary-color, linear-gradient(
+        159.9deg,rgba(138, 177, 255, 0.5) 0%,
+        rgba(22, 100, 255, 0.5) 100%
+      ));
+    }
+
+    &__text {
+      padding: 0 15px;
+      text-align: center;
+      .text();
+
+      &--different {
+        color: @primary-color;
+      }
+    }
+  }
+
+  &__right {
+    .version-container(rgba(100, 30, 237, 0.04));
+    &__title {
+      .title(@purple-color, linear-gradient(
+        159.9deg,
+        rgba(193, 138, 255, 0.5) 0%,
+        rgba(146, 22, 255, 0.5) 100%
+      ));
+    }
+
+    &__text {
+      padding: 0 15px;
+      text-align: center;
+      .text();
+
+      &--different {
+        color: @purple-color;
+      }
+    }
+  }
+}
diff --git a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx
new file mode 100644
index 00000000..2ee76e78
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx
@@ -0,0 +1,236 @@
+import KFModal from '@/components/KFModal';
+import {
+  DatasetData,
+  ModelData,
+  ProjectDependency,
+  ResourceType,
+  TrainTask,
+  resourceConfig,
+} from '@/pages/Dataset/config';
+import { isEmpty } from '@/utils';
+import { to } from '@/utils/promise';
+import { Typography, type ModalProps } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { formatSource } from '../ResourceIntro';
+import styles from './index.less';
+
+type CompareData = {
+  differences: Record<string, any>;
+  version1: DatasetData | ModelData;
+  version2: DatasetData | ModelData;
+};
+
+type FiledType<T extends DatasetData | ModelData> = {
+  key: keyof T;
+  text: string;
+  format?: (data: any) => any;
+};
+
+interface VersionCompareModalProps extends Omit<ModalProps, 'onOk'> {
+  versions: string[];
+  resourceType: ResourceType;
+  identifier: string;
+  is_public: boolean;
+  owner: string;
+  repo_id: number;
+}
+
+const formatDataset = (datasets?: DatasetData[]) => {
+  if (!datasets || datasets.length === 0) {
+    return undefined;
+  }
+  return datasets.map((item) => `${item.name}:${item.version}`).join(',');
+};
+
+const formatProject = (project?: ProjectDependency) => {
+  if (!project) {
+    return undefined;
+  }
+  return project.name;
+};
+
+export const formatTrainTask = (task?: TrainTask) => {
+  if (!task) {
+    return undefined;
+  }
+  return `${task.name}:${task.ins_id}`;
+};
+
+function VersionCompareModal({
+  versions,
+  resourceType,
+  identifier,
+  is_public,
+  owner,
+  repo_id,
+  ...rest
+}: VersionCompareModalProps) {
+  const [compareData, setCompareData] = useState<CompareData | undefined>(undefined);
+  const config = resourceConfig[resourceType];
+  const fields: FiledType<DatasetData>[] | FiledType<ModelData>[] = useMemo(
+    () =>
+      resourceType === ResourceType.Dataset
+        ? [
+            {
+              key: 'dataset_source',
+              text: '数据来源',
+              format: formatSource,
+            },
+            {
+              key: 'train_task',
+              text: '训练任务',
+              format: formatTrainTask,
+            },
+            {
+              key: 'processing_code',
+              text: '处理代码',
+              format: formatProject,
+            },
+            {
+              key: 'description',
+              text: '版本描述',
+            },
+          ]
+        : [
+            {
+              key: 'image',
+              text: '训练镜像',
+            },
+            {
+              key: 'project_depency',
+              text: '训练代码',
+              format: formatProject,
+            },
+            {
+              key: 'train_datasets',
+              text: '训练数据集',
+              format: formatDataset,
+            },
+            {
+              key: 'test_datasets',
+              text: '测试数据集',
+              format: formatDataset,
+            },
+            {
+              key: 'model_source',
+              text: '模型来源',
+              format: formatSource,
+            },
+            {
+              key: 'train_task',
+              text: '训练任务',
+              format: formatTrainTask,
+            },
+            {
+              key: 'description',
+              text: '版本描述',
+            },
+          ],
+    [],
+  );
+
+  useEffect(() => {
+    getServiceVersionCompare();
+  }, []);
+
+  // 获取对比数据
+  const getServiceVersionCompare = async () => {
+    const params = {
+      versions,
+      identifier,
+      is_public,
+      owner,
+      repo_id,
+    };
+    const request = config.compareVersion;
+    const [res] = await to(request(params));
+    if (res && res.data) {
+      setCompareData(res.data);
+    }
+  };
+
+  // 获取值
+  function getValue<T extends DatasetData | ModelData>(
+    data: T,
+    key: keyof T,
+    format?: (data: any) => any,
+  ) {
+    const value = data[key];
+    return format ? format(value) : value;
+  }
+
+  const {
+    version1: v1 = {} as DatasetData | ModelData,
+    version2: v2 = {} as DatasetData | ModelData,
+    differences = {},
+  } = compareData || {};
+
+  const isDifferent = (key: string) => {
+    return Object.keys(differences).includes(key);
+  };
+
+  return (
+    <KFModal
+      {...rest}
+      title={`${config.name}版本对比`}
+      width={825}
+      footer={null}
+      className={styles['version-compare']}
+    >
+      <div className={styles['version-compare__container']}>
+        <div className={styles['version-compare__fields']}>
+          <div className={styles['version-compare__fields__title']}>基础版本号</div>
+          {fields.map(({ key, text }) => (
+            <div
+              className={classNames(styles['version-compare__fields__text'], {
+                [styles['version-compare__fields__text--different']]: isDifferent(key),
+              })}
+              key={key}
+            >
+              {text}
+            </div>
+          ))}
+        </div>
+        <div className={styles['version-compare__left']}>
+          <div className={styles['version-compare__left__title']}>{v1.version}</div>
+          {fields.map(({ key, format }) => {
+            const text = getValue(v1, key as keyof typeof v1, format);
+            return (
+              <div
+                key={key}
+                className={classNames(styles['version-compare__left__text'], {
+                  [styles['version-compare__left__text--different']]: isDifferent(key),
+                })}
+              >
+                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                  {isEmpty(text) ? '--' : text}
+                </Typography.Text>
+              </div>
+            );
+          })}
+        </div>
+        <div className={styles['version-compare__right']}>
+          <div className={styles['version-compare__right__title']}>{v2.version}</div>
+          {fields.map(({ key, format }) => {
+            const text = getValue(v2, key as keyof typeof v2, format);
+            return (
+              <div
+                key={key}
+                className={classNames(styles['version-compare__right__text'], {
+                  [styles['version-compare__right__text--different']]: isDifferent(key),
+                })}
+              >
+                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                  {isEmpty(text) ? '--' : text}
+                </Typography.Text>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </KFModal>
+  );
+}
+
+export default VersionCompareModal;
diff --git a/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.less b/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.less
new file mode 100644
index 00000000..a7cfc361
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.less
@@ -0,0 +1,59 @@
+.version-selector-modal {
+  :global {
+    .ant-modal-content {
+      padding: 40px !important;
+    }
+    .kf-modal-title {
+      color: @text-color;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+.version-selector {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 100%;
+  padding: 30px 13px 20px;
+
+  :global {
+    .ant-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 10px 0;
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 103px;
+    padding: 15px;
+    color: @text-color-secondary;
+    font-size: 15px;
+    border: 1px solid rgba(136, 149, 168, 0.16);
+    border-radius: 6px;
+
+    img {
+      width: 26px;
+      height: 26px;
+      margin-bottom: 4px;
+    }
+
+    &:hover {
+      color: @text-color-secondary;
+      background-color: .addAlpha(@primary-color, 0.08) [];
+      border: 1px solid transparent;
+    }
+
+    &--active {
+      color: @primary-color !important;
+      background-color: .addAlpha(@primary-color, 0.08) [] !important;
+      border: 1px solid @primary-color !important;
+    }
+  }
+}
diff --git a/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx b/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx
new file mode 100644
index 00000000..c58bf87e
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx
@@ -0,0 +1,63 @@
+import KFModal from '@/components/KFModal';
+import { ResourceVersionData } from '@/pages/Dataset/config';
+import { Typography, message, type ModalProps } from 'antd';
+import classNames from 'classnames';
+import { useState } from 'react';
+import styles from './index.less';
+
+interface VersionSelectorModalProps extends Omit<ModalProps, 'onOk'> {
+  versions: ResourceVersionData[];
+  onOk: (versions: string[]) => void;
+}
+
+function VersionSelectorModal({ versions, onOk, ...rest }: VersionSelectorModalProps) {
+  const [selVersions, setSelVersions] = useState<string[]>([]);
+
+  const handleOk = () => {
+    if (selVersions.length !== 2) {
+      message.error('请选择两个版本进行对比');
+      return;
+    }
+    onOk(selVersions);
+  };
+
+  const handleClick = (version: string) => {
+    setSelVersions((prev) => {
+      if (prev.includes(version)) {
+        return prev.filter((item) => item !== version);
+      }
+      return [...prev, version];
+    });
+  };
+
+  return (
+    <KFModal
+      {...rest}
+      title="请选择版本"
+      width={825}
+      onOk={handleOk}
+      className={styles['version-selector-modal']}
+    >
+      <div className={styles['version-selector']}>
+        {versions.map((item) => {
+          return (
+            <div
+              key={item.name}
+              className={classNames(styles['version-selector__item'], {
+                [styles['version-selector__item--active']]: selVersions.includes(item.name),
+              })}
+              onClick={() => handleClick(item.name)}
+            >
+              <img src={require('@/assets/img/dataset-version.png')} alt="" draggable={false} />
+              <Typography.Text ellipsis={{ tooltip: item.name }} style={{ color: 'inherit' }}>
+                {item.name}
+              </Typography.Text>
+            </div>
+          );
+        })}
+      </div>
+    </KFModal>
+  );
+}
+
+export default VersionSelectorModal;
diff --git a/react-ui/src/pages/Dataset/config.tsx b/react-ui/src/pages/Dataset/config.tsx
index c5b53afb..d24586a6 100644
--- a/react-ui/src/pages/Dataset/config.tsx
+++ b/react-ui/src/pages/Dataset/config.tsx
@@ -3,6 +3,8 @@ import { CommonTabKeys } from '@/enums';
 import {
   addDatasetVersion,
   addModelVersion,
+  compareDatasetVersion,
+  compareModelVersion,
   deleteDataset,
   deleteDatasetVersion,
   deleteModel,
@@ -35,6 +37,7 @@ type ResourceTypeInfo = {
   addVersion: (params: any) => Promise<any>; // 新增版本
   deleteVersion: (params: any) => Promise<any>; // 删除版本
   getInfo: (params: any) => Promise<any>; // 获取详情
+  compareVersion: (params: any) => Promise<any>; // 版本对比
   name: string; // 名称
   typeParamKey: 'data_type' | 'model_type'; // 类型参数名称，获取资源列表接口使用
   tagParamKey: 'data_tag' | 'model_tag'; // 标签参数名称，获取资源列表接口使用
@@ -63,6 +66,7 @@ export const resourceConfig: Record<ResourceType, ResourceTypeInfo> = {
     addVersion: addDatasetVersion,
     deleteVersion: deleteDatasetVersion,
     getInfo: getDatasetInfo,
+    compareVersion: compareDatasetVersion,
     name: '数据集',
     typeParamKey: 'data_type',
     tagParamKey: 'data_tag',
@@ -100,6 +104,7 @@ export const resourceConfig: Record<ResourceType, ResourceTypeInfo> = {
     addVersion: addModelVersion,
     deleteVersion: deleteModelVersion,
     getInfo: getModelInfo,
+    compareVersion: compareModelVersion,
     name: '模型',
     typeParamKey: 'model_type',
     tagParamKey: 'model_tag',
diff --git a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx
index d1f8d2d6..d01e36f8 100644
--- a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx
+++ b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx
@@ -58,18 +58,15 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
     checkSingleMetrics,
   ] = useCheck(allMetricsNames);
 
-  useEffect(() => {
-    getModelPageVersions();
-  }, []);
-
   useEffect(() => {
     if (selectedMetrics.length !== 0 && selectedRowKeys.length !== 0) {
       getModelVersionsMetrics();
     } else {
       setChartData(undefined);
     }
-  }, [selectedMetrics, selectedRowKeys]);
+  }, [selectedMetrics, selectedRowKeys, identifier, resourceId]);
 
+  // 版本切换，自动勾选当前版本
   useEffect(() => {
     const curRow = tableData.find((item) => item.name === version);
     if (
@@ -80,7 +77,11 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
     ) {
       setSelectedRowKeys([version, ...selectedRowKeys]);
     }
-  }, [version]);
+  }, [tableData, version]);
+
+  useEffect(() => {
+    getModelPageVersions();
+  }, [pagination, identifier, owner]);
 
   // 获取模型版本列表，带有参数和指标数据
   const getModelPageVersions = async () => {
diff --git a/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx b/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx
index 1e755765..da88b2de 100644
--- a/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx
+++ b/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx
@@ -3,6 +3,7 @@ import { ServiceRunStatus } from '@/enums';
 import { useComputingResource } from '@/hooks/resource';
 import { type ServiceVersionData } from '@/pages/ModelDeployment/types';
 import { getServiceVersionCompareReq } from '@/services/modelDeployment';
+import { isEmpty } from '@/utils';
 import { to } from '@/utils/promise';
 import { Typography, type ModalProps } from 'antd';
 import classNames from 'classnames';
@@ -24,7 +25,7 @@ type FiledType = {
   format?: (data: any) => any;
 };
 
-interface CreateMirrorModalProps extends Omit<ModalProps, 'onOk'> {
+interface VersionCompareModalProps extends Omit<ModalProps, 'onOk'> {
   version1: string;
   version2: string;
 }
@@ -39,7 +40,7 @@ const formatEnvText = (env: Record<string, string>) => {
     .join(',');
 };
 
-function VersionCompareModal({ version1, version2, ...rest }: CreateMirrorModalProps) {
+function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModalProps) {
   const [compareData, setCompareData] = useState<CompareData | undefined>(undefined);
   const getResourceDescription = useComputingResource()[2];
 
@@ -165,7 +166,7 @@ function VersionCompareModal({ version1, version2, ...rest }: CreateMirrorModalP
                 })}
               >
                 <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
-                  {text}
+                  {isEmpty(text) ? '--' : text}
                 </Typography.Text>
               </div>
             );
@@ -183,7 +184,7 @@ function VersionCompareModal({ version1, version2, ...rest }: CreateMirrorModalP
                 })}
               >
                 <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
-                  {text}
+                  {isEmpty(text) ? '--' : text}
                 </Typography.Text>
               </div>
             );
diff --git a/react-ui/src/services/dataset/index.js b/react-ui/src/services/dataset/index.js
index b072d00e..9ddeba2e 100644
--- a/react-ui/src/services/dataset/index.js
+++ b/react-ui/src/services/dataset/index.js
@@ -75,6 +75,14 @@ export function deleteDatasetVersion(params) {
   });
 }
 
+// 数据集版本对比
+export function compareDatasetVersion(data) {
+  return request(`/api/mmp/newdataset/getVersionsCompare`, {
+    method: 'POST',
+    data,
+  });
+}
+
 // ----------------------------模型---------------------------------
 
 // 分页查询模型列表
@@ -165,4 +173,12 @@ export function getModelVersionsMetricsReq(data) {
     method: 'POST',
     data
   });
+}
+
+// 模型版本对比
+export function compareModelVersion(data) {
+  return request(`/api/mmp/newmodel/getVersionsCompare`, {
+    method: 'POST',
+    data,
+  });
 }
\ No newline at end of file
diff --git a/react-ui/tests/date.test.ts b/react-ui/tests/date.test.ts
new file mode 100644
index 00000000..6dbb028f
--- /dev/null
+++ b/react-ui/tests/date.test.ts
@@ -0,0 +1,23 @@
+import { canBeConvertToDate } from '../src/utils/date';
+
+describe('canBeConvertToDate()', () => {
+  test('null', () => {
+    expect(canBeConvertToDate(null)).toBe(false);
+  });
+
+  test('undefined', () => {
+    expect(canBeConvertToDate(undefined)).toBe(false);
+  });
+
+  test('empty string', () => {
+    expect(canBeConvertToDate('')).toBe(false);
+  });
+
+  test('valid string', () => {
+    expect(canBeConvertToDate('2024-10-10T10:10:10+08:00')).toBe(true);
+  });
+
+  test('numeric', () => {
+    expect(canBeConvertToDate(0)).toBe(true);
+  });
+});