ci4sManagement-cloud/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx

import KFIcon from '@/components/KFIcon';
import ModelEvolution from '@/pages/Model/components/ModelEvolution';
import { to } from '@/utils/promise';
import { useParams, useSearchParams } from '@umijs/max';
import { Flex, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import { ResourceData, ResourceType, resourceConfig } from '../../config';
import ResourceVersion from '../ResourceVersion';
import styles from './index.less';

export enum ResourceInfoTabKeys {
  Introduction = 'introduction',
  Version = 'version',
  Evolution = 'evolution',
}

type ResourceIntroProps = {
  resourceType: ResourceType;
};

const ResourceIntro = ({ resourceType }: ResourceIntroProps) => {
  const [info, setInfo] = useState<ResourceData>({} as ResourceData);
  const locationParams = useParams();
  const [searchParams] = useSearchParams();
  const defaultTab = searchParams.get('tab') || ResourceInfoTabKeys.Introduction;
  let versionParam = searchParams.get('version');
  const [versionList, setVersionList] = useState([]);
  const [version, setVersion] = useState<string | undefined>(undefined);
  const [activeTab, setActiveTab] = useState<string>(defaultTab);
  const resourceId = Number(locationParams.id);
  const config = resourceConfig[resourceType];
  const typeName = config.name; // 数据集/模型

  useEffect(() => {
    getModelByDetail();
    getVersionList();
  }, [resourceId]);

  // 获取详情
  const getModelByDetail = async () => {
    const request = config.getInfo;
    const [res] = await to(request(resourceId));
    if (res) {
      setInfo(res.data);
    }
  };

  // 获取版本列表
  const getVersionList = async () => {
    const request = config.getVersions;
    const [res] = await to(request(resourceId));
    if (res && res.data && res.data.length > 0) {
      setVersionList(
        res.data.map((item: string) => {
          return {
            label: item,
            value: item,
          };
        }),
      );
      if (versionParam) {
        setVersion(versionParam);
        versionParam = null;
      } else {
        setVersion(res.data[0]);
      }
    } else {
      setVersion(undefined);
    }
  };

  // 版本变化
  const handleVersionChange = (value: string) => {
    setVersion(value);
  };

  const items = [
    {
      key: ResourceInfoTabKeys.Introduction,
      label: `${typeName}简介`,
      icon: <KFIcon type="icon-moxingjianjie" />,
      children: (
        <>
          <div className={styles['resource-intro__title']}>简介</div>
          <div className={styles['resource-intro__intro']}>{info.description}</div>
        </>
      ),
    },
    {
      key: ResourceInfoTabKeys.Version,
      label: `${typeName}文件/版本`,
      icon: <KFIcon type="icon-moxingwenjian" />,
      children: (
        <ResourceVersion
          resourceType={resourceType}
          resourceId={resourceId}
          resourceName={info.name}
          isPublic={info.available_range === 1}
          versionList={versionList}
          version={version}
          isActive={activeTab === ResourceInfoTabKeys.Version}
          getVersionList={getVersionList}
          onVersionChange={handleVersionChange}
        ></ResourceVersion>
      ),
    },
  ];

  if (resourceType === ResourceType.Model) {
    items.push({
      key: ResourceInfoTabKeys.Evolution,
      label: `模型演化`,
      icon: <KFIcon type="icon-moxingyanhua1" />,
      children: (
        <ModelEvolution
          resourceId={resourceId}
          versionList={versionList}
          version={version}
          isActive={activeTab === ResourceInfoTabKeys.Evolution}
          onVersionChange={handleVersionChange}
        ></ModelEvolution>
      ),
    });
  }

  const infoTypePropertyName = config.infoTypePropertyName as keyof ResourceData;
  const infoTagPropertyName = config.infoTagPropertyName as keyof ResourceData;

  return (
    <div className={styles['resource-intro']}>
      <div className={styles['resource-intro__top']}>
        <div className={styles['resource-intro__top__name']}>{info.name}</div>
        <Flex align="center">
          <div className={styles['resource-intro__top__tag']}>
            {typeName} id：{info.id}
          </div>
          {info[infoTypePropertyName] && (
            <div className={styles['resource-intro__top__tag']}>
              {info[infoTypePropertyName] || '--'}
            </div>
          )}
          {info[infoTagPropertyName] && (
            <div className={styles['resource-intro__top__tag']}>
              {info[infoTagPropertyName] || '--'}
            </div>
          )}
        </Flex>
      </div>
      <div className={styles['resource-intro__bottom']}>
        <Tabs activeKey={activeTab} items={items} onChange={(key) => setActiveTab(key)}></Tabs>
      </div>
    </div>
  );
};
export default ResourceIntro;