From 167c687a5b454763a93453d4d3ca52b3c115a54b Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 20 Aug 2025 11:39:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E6=A0=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ideContainer/index.tsx              | 28 +++++----
 src/pages/ideContainer/logBar.tsx             | 63 +++++++++++++++++++
 .../ideContainer/style/index.module.less      | 23 +++++++
 .../ideContainer/style/logBar.module.less     | 12 ++++
 4 files changed, 114 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/ideContainer/logBar.tsx
 create mode 100644 src/pages/ideContainer/style/logBar.module.less

diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx
index fa1ed6d..68d872c 100644
--- a/src/pages/ideContainer/index.tsx
+++ b/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 CompListComponent = () => <div>组件列表</div>;
-const AppInstanceComponent = () => <div>应用实例</div>;
-const EventComponent = () => <div>事件</div>;
-const GlobalVarComponent = () => <div>全局变量</div>;
+const AppFlowComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用编排</div>;
+const CompListComponent = () => <div style={{ height: '70vh', width: '100%' }}>组件列表</div>;
+const AppInstanceComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用实例</div>;
+const EventComponent = () => <div style={{ height: '70vh', width: '100%' }}>事件</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' }}>
-          {renderContent()}
-        </Content>
-
-      </Layout>
+        <div className={styles.content}>
+          <div className={styles.mainContent}>
+            {renderContent()}
+          </div>
+          <LogBar></LogBar>
+        </div>
+
+      </div>
     </>
   );
 }
diff --git a/src/pages/ideContainer/logBar.tsx b/src/pages/ideContainer/logBar.tsx
new file mode 100644
index 0000000..71542f4
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/ideContainer/style/index.module.less b/src/pages/ideContainer/style/index.module.less
index 85bbbcd..79ac4f5 100644
--- a/src/pages/ideContainer/style/index.module.less
+++ b/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;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/ideContainer/style/logBar.module.less b/src/pages/ideContainer/style/logBar.module.less
new file mode 100644
index 0000000..0edae89
--- /dev/null
+++ b/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;
+}
\ No newline at end of file