flow-playform-react/src/pages/ideContainer/rightSideBar.tsx

import React, { useState, useRef, useEffect } from 'react';
import styles from './style/rightSideBar.module.less';
import { Tabs, ResizeBox } from '@arco-design/web-react';
import { IconApps, IconRobot } from '@arco-design/web-react/icon';
import ChatBox from './chatBox';
import Market from './market';

const TabPane = Tabs.TabPane;

interface RightSideBarProps {
  updateProjectComp: () => void;
}

const RightSideBar: React.FC<RightSideBarProps> = ({ updateProjectComp }) => {
  const [activeTab, setActiveTab] = useState('1');
  const [isExpanded, setIsExpanded] = useState(false);
  const resizeBoxRef1 = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器
  const resizeBoxRef2 = useRef<HTMLDivElement>(null); // 引用第二个 ResizeBox 容器

  const handleTabClick = (key: string) => {
    if (key === activeTab) {
      setIsExpanded(!isExpanded);
    }
    else {
      setActiveTab(key);
      setIsExpanded(true);
    }
  };

  // 当 isExpanded 或 activeTab 状态改变时，直接更新对应元素的样式
  useEffect(() => {
    const width = isExpanded ? 550 : 0;

    if (activeTab === '1' && resizeBoxRef1.current) {
      resizeBoxRef1.current.style.width = `${width}px`;
    }

    if (activeTab === '2' && resizeBoxRef2.current) {
      resizeBoxRef2.current.style.width = `${width}px`;
    }
  }, [isExpanded, activeTab]);

  // 处理 ResizeBox 拖动事件
  const handleResize = (e: MouseEvent, { width }: { width: number }) => {
    if (width > 0) {
      // 如果之前是收起状态，拖动后应该展开
      if (!isExpanded) {
        setIsExpanded(true);
      }
    }
  };

  return (
    <>
      <div className={styles['right-side-bar']}>
        <Tabs
          key="card"
          tabPosition="right"
          className={`${styles.verticalTabs} right-side-bar-tabs`}
          activeTab={activeTab}
        >
          <TabPane
            key="1"
            title={
              <span onClick={() => handleTabClick('1')}>
                <IconApps style={{ fontSize: 16 }} />
                <span>智能编排</span>
              </span>
            }
          >
            {activeTab === '1' && <ResizeBox
              ref={resizeBoxRef1}
              className={styles['right-resize-box']}
              directions={['left']}
              style={{
                width: isExpanded ? 550 : 0,
                maxWidth: '100%',
                minWidth: 0
              }}
              onMoving={handleResize}
            >
              <ChatBox></ChatBox>
            </ResizeBox>}
          </TabPane>
          <TabPane
            key="2"
            title={
              <span onClick={() => handleTabClick('2')}>
                <IconRobot style={{ fontSize: 16 }} />
                <span>组件市场</span>
              </span>
            }
          >
            {activeTab === '2' && <ResizeBox
              ref={resizeBoxRef2}
              className={styles['right-resize-box']}
              directions={['left']}
              style={{
                width: isExpanded ? 550 : 0,
                maxWidth: '100%',
                minWidth: 0
              }}
              onMoving={handleResize}
            >
              <Market updateProjectComp={updateProjectComp}></Market>
            </ResizeBox>}
          </TabPane>
        </Tabs>
      </div>
    </>
  );
};

export default RightSideBar;