feat(ideContainer): 添加日志栏并优化布局

src/pages/ideContainer/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { Layout } from '@arco-design/web-react';
 import styles from './style/index.module.less';
 import SideBar from './sideBar';
-import { Layout } from '@arco-design/web-react';
+import LogBar from './logBar';
 
 const Content = Layout.Content;
 
@@ -11,11 +12,11 @@ interface Selected {
 }
 
 // 假设您有这些组件
-const AppFlowComponent = () => <div>应用编排</div>;
+const AppFlowComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用编排</div>;
-const CompListComponent = () => <div>组件列表</div>;
+const CompListComponent = () => <div style={{ height: '70vh', width: '100%' }}>组件列表</div>;
-const AppInstanceComponent = () => <div>应用实例</div>;
+const AppInstanceComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用实例</div>;
-const EventComponent = () => <div>事件</div>;
+const EventComponent = () => <div style={{ height: '70vh', width: '100%' }}>事件</div>;
-const GlobalVarComponent = () => <div>全局变量</div>;
+const GlobalVarComponent = () => <div style={{ height: '70vh', width: '100%' }}>全局变量</div>;
 
 function IDEContainer() {
 
@@ -40,16 +41,19 @@ function IDEContainer() {
   };
   return (
     <>
-      <Layout className={styles.IDEContainer}>
+      <div className={styles.IDEContainer}>
         <SideBar
           onMenuSelect={(select) => setSelected(select)}
           selectedKey={selected.currentKey}
         />
-        <Content style={{ paddingLeft: '220px' }}>
+        <div className={styles.content}>
-          {renderContent()}
+          <div className={styles.mainContent}>
-        </Content>
+            {renderContent()}
-
+          </div>
-      </Layout>
+          <LogBar></LogBar>
+        </div>
+
+      </div>
     </>
   );
 }

src/pages/ideContainer/logBar.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { ResizeBox } 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;
+}
+
+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, setTabs] = useState(data);
+  const [activeTab, setActiveTab] = useState('1');
+
+
+  return (
+    <>
+      <ResizeBox
+        className={styles.logBar}
+        directions={['top']}
+      >
+        <Tabs
+          type="card-gutter"
+          activeTab={activeTab}
+          onChange={setActiveTab}
+        >
+          {tabs.map((x, i) => (
+            <TabPane destroyOnHide key={x.key} title={x.title}>
+              {x.content}
+            </TabPane>
+          ))}
+        </Tabs>
+      </ResizeBox>
+    </>
+  );
+};
+
+export default LogBar;

src/pages/ideContainer/style/index.module.less

@@ -1,4 +1,27 @@
+@layout-max-width: 1100px;
+
 .IDEContainer {
   width: 100%;
   height: 100%;
+  padding: 0;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--color-fill-2);
+    min-width: @layout-max-width;
+    transition: padding-left 0.2s;
+    box-sizing: border-box;
+    padding-left: 220px;
+
+
+    .mainContent {
+      overflow: auto;
+
+      > div {
+        flex: 1;
+      }
+    }
+  }
 }

src/pages/ideContainer/style/logBar.module.less

@@ -0,0 +1,12 @@
+.logBar {
+  width: calc(100% - 220px);
+  min-height: 150px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: #fff;
+  border-top: 2px solid #ddd;
+  transform: translateZ(0);
+  will-change: height;
+  z-index: 100;
+}