feat(logBar): 实现日志栏的折叠功能

- 添加收起状态,默认为收起
- 实现 Tab 点击事件的自定义处理
- 根据收起状态动态调整日志栏高度
- 优化 Tabs 组件的使用,移除不必要的属性
master
钟良源 5 months ago
parent b7586b95b8
commit 0ff7bb1c15

@ -1,11 +1,9 @@
import React, { useState } from 'react';
import { ResizeBox } from '@arco-design/web-react';
import { ResizeBox, Tabs } from '@arco-design/web-react';
import styles from './style/logBar.module.less';
import { Tabs, Typography } from '@arco-design/web-react';
const TabPane = Tabs.TabPane;
interface LogBarProps {
a?: string;
}
@ -34,9 +32,22 @@ const data = [
];
const LogBar: React.FC<LogBarProps> = () => {
const [tabs, setTabs] = useState(data);
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 (
<>
@ -44,15 +55,15 @@ const LogBar: React.FC<LogBarProps> = () => {
className={styles.logBar}
directions={['top']}
style={{
height: 250
height: collapsed ? 40 : 250 // 收起时只显示 tab 高度,展开时显示完整高度
}}
>
<Tabs
type="card-gutter"
activeTab={activeTab}
onChange={setActiveTab}
onClickTab={handleTabClick} // 使用自定义点击处理函数
>
{tabs.map((x, i) => (
{tabs.map((x) => (
<TabPane destroyOnHide key={x.key} title={x.title}>
{x.content}
</TabPane>

Loading…
Cancel
Save