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

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

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

Loading…
Cancel
Save