flow-playform-react/src/pages/componentMarket/index.tsx

import React, { useEffect, useState } from 'react';
import styles from './style/index.module.less';
import CustomCard from '@/components/CustomCard/index';
import CompCard from './compCard';
import CompDetails from './compDetails';
import { Tabs, Input, Select, Button } from '@arco-design/web-react';
import { IconUndo } from '@arco-design/web-react/icon';
import { getComponentClassify } from '@/api/componentClassify';

const TabPane = Tabs.TabPane;
const InputSearch = Input.Search;

// 分类数据接口
interface ClassifyItem {
  id: string;
  classifyName: string;
  classifyType: string;
  remark?: string;
  sort?: number;
}

function ComponentMarket() {
  const [menuList, setMenuList] = useState<ClassifyItem[]>([]);
  const [activeTab, setActiveTab] = useState<string>('全部');
  const [searchClassify, setSearchClassify] = useState<string>('全部');
  const [searchKeyword, setSearchKeyword] = useState<string>('');
  const [selectedComp, setSelectedComp] = useState(null);

  // 获取分类菜单列表
  const getMenuList = async () => {
    try {
      const res: any = await getComponentClassify('component');
      if (res?.code === 200 && res?.data) {
        // 添加"全部"选项到菜单列表
        const allOption = {
          id: '0',
          classifyName: '全部',
          classifyType: 'component',
          sort: 0
        };
        setMenuList([allOption, ...res.data]);
      }
    } catch (error) {
      console.error('获取分类菜单失败:', error);
    }
  };

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

  // 处理Tab切换
  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };

  // 处理搜索
  const handleSearch = (value: string) => {
    setSearchKeyword(value);
  };

  // 处理分类选择
  const handleClassifyChange = (value: string) => {
    setSearchClassify(value);
  };

  return (
    <>
      <div className={styles['comp-market-container']}>
        <CustomCard>
          {/*公用搜索*/}
          <div className={styles['comp-market-header']}>
            {selectedComp && (
              <Button type="text" style={{ marginRight: 10 }} onClick={() => setSelectedComp(null)}>
                <IconUndo style={{ fontSize: 16 }} />
                返回
              </Button>)}
            <div className={styles['comp-market-search']}>
              <Input.Group compact>
                <Select
                  size="large"
                  value={searchClassify}
                  onChange={handleClassifyChange}
                  style={{ width: '25%' }}
                >
                  {menuList.map((item) => (
                    <Select.Option key={item.id} value={item.classifyName}>
                      {item.classifyName}
                    </Select.Option>
                  ))}
                </Select>
                <InputSearch
                  size="large"
                  placeholder="请输入组件名、关键词进行搜索"
                  style={{ width: '75%' }}
                  onSearch={handleSearch}
                  allowClear
                />
              </Input.Group>
            </div>
          </div>
          {selectedComp ?
            <CompDetails compInfo={selectedComp} />
            :
            <Tabs
              key="card"
              tabPosition="left"
              activeTab={activeTab}
              onChange={handleTabChange}
            >
              {/*单类型数据渲染*/}
              {menuList.map((item) => (
                <TabPane key={item.classifyName} title={item.classifyName}>
                  {item.classifyName === activeTab && (
                    <CompCard
                      selectedTab={activeTab}
                      componentClassify={item.classifyName}
                      searchClassify={searchClassify}
                      searchKeyword={searchKeyword}
                      selectedComp={setSelectedComp}
                    />
                  )}
                </TabPane>
              ))}
            </Tabs>
          }
        </CustomCard>
      </div>
    </>
  );
}

export default ComponentMarket;