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

import React, { useState } from 'react';
import { ResizeBox, Tabs } from '@arco-design/web-react';
import styles from './style/logBar.module.less';

const TabPane = Tabs.TabPane;

interface LogBarProps {
  a?: string;
}

const data = [
  {
    key: '1',
    title: '运行日志',
    content: '运行时日志...'
  },
  {
    key: '2',
    title: '校验日志',
    content: '校验日志...'
  },
  {
    key: '3',
    title: '流程运行日志',
    content: '流程运行时日志...'
  },
  {
    key: '4',
    title: '组件日志',
    content: '组件日志...'
  }
];

const LogBar: React.FC<LogBarProps> = () => {
  const [tabs] = useState(data);
  const [activeTab, setActiveTab] = useState('1');
  const [collapsed, setCollapsed] = useState(true); // 添加收起状态，默认为收起

  // 处理 Tab 点击事件
  const handleTabClick = (key: string) => {
    // 如果点击当前激活的 tab，则切换收起状态
    if (key === activeTab) {
      setCollapsed(!collapsed);
    }
    else {
      // 如果点击的是其他 tab，则切换到该 tab 并展开
      setActiveTab(key);
      setCollapsed(false);
    }
  };

  return (
    <>
      <ResizeBox
        className={styles.logBar}
        directions={['top']}
        style={{
          height: collapsed ? 40 : 250 // 收起时只显示 tab 高度，展开时显示完整高度
        }}
      >
        <Tabs
          type="card-gutter"
          activeTab={activeTab}
          onClickTab={handleTabClick} // 使用自定义点击处理函数
        >
          {tabs.map((x) => (
            <TabPane destroyOnHide key={x.key} title={x.title}>
              {x.content}
            </TabPane>
          ))}
        </Tabs>
      </ResizeBox>
    </>
  );
};

export default LogBar;