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

import { CommonTabKeys } from '@/enums';
import { useCacheState } from '@/hooks/pageCacheState';
import { getAssetIcon } from '@/services/dataset/index.js';
import { to } from '@/utils/promise';
import { Flex, Tabs, type TabsProps } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { CategoryData, ResourceType, resourceConfig } from '../../types';
import CategoryList from '../CategoryList';
import ResourceList, { ResourceListRef } from '../ResourceList';
import styles from './index.less';

type ResourcePageProps = {
  resourceType: ResourceType; // 资源类型，数据集还是模型
};

function ResourcePage({ resourceType }: ResourcePageProps) {
  const [cacheState, setCacheState] = useCacheState();
  const [activeTab, setActiveTab] = useState<string>(cacheState?.activeTab ?? CommonTabKeys.Public);
  const [typeList, setTypeList] = useState<CategoryData[]>([]);
  const [tagList, setTagList] = useState<CategoryData[]>([]);
  const [activeType, setActiveType] = useState<number | undefined>(cacheState?.activeType);
  const [activeTag, setActiveTag] = useState<number | undefined>(cacheState?.activeTag);
  const dataListRef = useRef<ResourceListRef>(null);

  useEffect(() => {
    getAssetIconList();
  }, []);

  // 分类搜索
  const handleCategorySearch = (value: string) => {
    getAssetIconList(value);
  };

  // 选择类型
  const chooseType = (record: CategoryData) => {
    setActiveType((prev) => (prev === record.id ? undefined : record.id));
  };

  // 选择 Tag
  const chooseTag = (record: CategoryData) => {
    setActiveTag((prev) => (prev === record.id ? undefined : record.id));
  };

  // 获取分类
  const getAssetIconList = async (name: string = '') => {
    const params = {
      name: name,
      page: 0,
      size: 10000,
    };
    const [res] = await to(getAssetIcon(params));
    if (res && res.data && res.data.content) {
      const { content } = res.data;
      setTypeList(
        content.filter(
          (item: CategoryData) =>
            Number(item.category_id) === resourceConfig[resourceType].typeValue,
        ),
      );
      setTagList(
        content.filter(
          (item: CategoryData) =>
            Number(item.category_id) === resourceConfig[resourceType].tagValue,
        ),
      );
    }
  };

  // 切换 Tab，重置数据
  const hanleTabChange: TabsProps['onChange'] = (value) => {
    dataListRef.current?.reset();
    setActiveTab(value);
  };

  const isPublic = activeTab === CommonTabKeys.Public;
  return (
    <div className={styles['resource-page']}>
      <div className={styles['resource-page__tabs-container']}>
        <Tabs
          activeKey={activeTab}
          items={resourceConfig[resourceType].tabItems}
          onChange={hanleTabChange}
        />
      </div>
      <Flex style={{ marginTop: '10px', height: 'calc(100% - 59px)' }}>
        <CategoryList
          resourceType={resourceType}
          typeList={typeList}
          tagList={tagList}
          activeType={activeType}
          activeTag={activeTag}
          onTypeSelect={chooseType}
          onTagSelect={chooseTag}
          onSearch={handleCategorySearch}
        />
        <ResourceList
          ref={dataListRef}
          resourceType={resourceType}
          typeList={typeList}
          tagList={tagList}
          isPublic={isPublic}
          dataType={activeType}
          dataTag={activeTag}
          initialSearchText={cacheState?.searchText}
          initialPagination={cacheState?.initialPagination}
          setCacheState={setCacheState}
        ></ResourceList>
      </Flex>
    </div>
  );
}

export default ResourcePage;