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

import React, { useEffect, useState } from 'react';
import styles from './style/index.module.less';
import CustomCard from '@/components/CustomCard/index';
import CollapseBox from './collapseBox';
import { Space, Input, Button, Tabs, Tag } from '@arco-design/web-react';

const TabPane = Tabs.TabPane;

function ComponentLibrary() {
  const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
  const componentData = JSON.parse(sessionStorage.getItem(`compLibs${userInfo.userId}`));

  const [inputValue, setInputValue] = useState('');
  const [activeKey, setActiveKey] = useState<'myLibs' | 'pubLibs' | 'teamLibs'>('myLibs');
  const [componentsTree, setComponentsTree] = useState([]);
  const [filteredComponentsTree, setFilteredComponentsTree] = useState([]);

  const handelChangeTabs = (key) => {
    if (componentData && Object.keys(componentData).length > 0) setComponentsTree(componentData[key]);
    setActiveKey(key);
  };

  const handelSearch = () => {
    const newTree = componentsTree.map(item => {
      const filteredChildren = item.children.filter(sub => sub.label.toLowerCase().includes(inputValue.toLowerCase()));
      return {
        ...item,
        children: filteredChildren
      };
    })
      .filter(item => item.children.length > 0);
    setFilteredComponentsTree(newTree);
  };

  useEffect(() => {
    handelSearch();
  }, [inputValue, activeKey]);

  return (
    <>
      <div className={styles['comp-library-container']}>
        <CustomCard>
          <Space
            size={20}
            style={{ marginBottom: '5px' }}
          >
            <Input
              value={inputValue || ''}
              onChange={(value) => setInputValue(value)}
              allowClear
              placeholder="输入名称搜索组件"
              style={{ width: 350 }} />
            {/*<Button type="primary">组件推荐</Button>*/}
          </Space>
          <Tabs
            defaultActiveTab={activeKey}
            onChange={(e) => handelChangeTabs(e)}
          >
            <TabPane
              key="myLibs"
              title={
                <span>
                  <span>我的组件</span>
                  <Tag color="arcoblue">
                    {componentData.myLibs.length}
                  </Tag>
                </span>
              }
            >
              <CollapseBox
                componentType="myLibs"
                data={inputValue ? filteredComponentsTree : componentData.myLibs} />
            </TabPane>
            <TabPane
              key="pubLibs"
              title={
                <span>
                  <span>公开组件</span>
                  <Tag color="arcoblue">
                    {componentData.pubLibs.length}
                  </Tag>
                </span>
              }>
              <CollapseBox
                componentType="pubLibs"
                data={inputValue ? filteredComponentsTree : componentData.pubLibs} />
            </TabPane>
            <TabPane
              key="teamLibs"
              title={
                <span>
                  <span>协同组件</span>
                  <Tag color="arcoblue">
                    {componentData.teamLibs.length}
                  </Tag>
                </span>
              }
            >
              <CollapseBox
                componentType="teamLibs"
                data={inputValue ? filteredComponentsTree : componentData.teamLibs} />
            </TabPane>
          </Tabs>
        </CustomCard>
      </div>
    </>
  );
}

export default ComponentLibrary;