diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx
new file mode 100644
index 0000000..8c75aef
--- /dev/null
+++ b/src/pages/componentDevelopment/componentList/index.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import styles from './style/index.module.less';
+import { Button, Divider, Input, Space, Table, Radio } from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+
+const Group = Radio.Group;
+
+const GlobalVarContainer = () => {
+  const [selectedItem, setSelectedItem] = useState('数字类型');
+
+  const menuItems = [
+    '我的组件',
+    '协同组件',
+    '组件审核'
+  ];
+
+  return (
+    <div className={styles['comp-list-container']}>
+      {/*左侧菜单*/}
+      <div className={styles['comp-list-menu']}>
+        {menuItems.map((item, index) => (
+          <div
+            key={index}
+            className={selectedItem === item ? styles['selected'] : ''}
+            onClick={() => setSelectedItem(item)}
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+      <div className={styles['comp-list-content']}>
+        {/*头部*/}
+        <div className={styles['comp-list-header']}>
+          <div className={styles['comp-list-search']}>
+            <Space>
+              <Input
+                prefix={<IconSearch />}
+                placeholder={'搜索'}
+                style={{ width: 236 }}
+              />
+              <Button
+                type="primary"
+                style={{ marginLeft: 5, borderRadius: 4 }}
+              >
+                搜索
+              </Button>
+            </Space>
+          </div>
+          <div className={styles['comp-list-handle']}>
+            <Radio.Group defaultValue={'Beijing'} name="button-radio-group">
+              {['未设计', '编码中', '已部署'].map((item) => {
+                return (
+                  <Radio key={item} value={item}>
+                    {({ checked }) => {
+                      return (
+                        <Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
+                          {item}
+                        </Button>
+                      );
+                    }}
+                  </Radio>
+                );
+              })}
+            </Radio.Group>
+            <Space split={<Divider type="vertical" />}>
+              <Button type="secondary" style={{ borderRadius: 4 }}>生成组件</Button>
+              <Button type="outline" style={{ borderRadius: 4 }}>导入组件</Button>
+              <Button type="primary" style={{ borderRadius: 4 }}>+ 新增组件</Button>
+            </Space>
+          </div>
+
+        </div>
+        {/*数据列表*/}
+        <div className={styles['comp-list-list']}>
+          {/*<Table columns={columns} data={eventData} pagination={false} />*/}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GlobalVarContainer;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentList/style/index.module.less b/src/pages/componentDevelopment/componentList/style/index.module.less
new file mode 100644
index 0000000..1d945bb
--- /dev/null
+++ b/src/pages/componentDevelopment/componentList/style/index.module.less
@@ -0,0 +1,53 @@
+.comp-list-container {
+  display: flex;
+  height: 98%;
+  background-color: #ffffff;
+  padding: 17px 19px 0 24px;
+
+  .comp-list-menu {
+    flex: 1;
+    border-right: 4px solid #E5E6EB;
+    padding-left: 30px;
+
+    & > div {
+      width: 80%;
+      height: 36px;
+      margin: 6px 0;
+      font-size: 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+    }
+
+    .selected {
+      font-weight: bold;
+      background-color: #F0EEFC;
+      border-radius: 4px;
+    }
+  }
+
+
+  .comp-list-content {
+    flex: 8;
+    padding: 0 0 0 40px;
+
+    .comp-list-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+
+      .comp-list-title {
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      .comp-list-handle {
+      }
+    }
+
+    .comp-list-list {
+
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/index.tsx b/src/pages/componentDevelopment/index.tsx
deleted file mode 100644
index c75fcb2..0000000
--- a/src/pages/componentDevelopment/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-function ComponentDevelopment() {
-  return (
-    <>
-      <div>
-        组件开发
-      </div>
-    </>
-  );
-}
-
-export default ComponentDevelopment;
\ No newline at end of file
diff --git a/src/pages/ideContainer/config/menuData.ts b/src/pages/ideContainer/config/menuData.ts
index 36d4d5e..cff58d3 100644
--- a/src/pages/ideContainer/config/menuData.ts
+++ b/src/pages/ideContainer/config/menuData.ts
@@ -72,28 +72,30 @@ export const menuData1 = [
 export const menuData2 = [
   {
     title: '组件列表',
+    path: 'componentList',
     key: 'componentList',
     parentKey: 'componentList',
-    children: [
-      {
-        title: '我的组件',
-        children: null,
-        path: 'myComponents',
-        parentKey: 'componentList'
-      },
-      {
-        title: '协同组件',
-        children: null,
-        path: 'matchingComponents',
-        parentKey: 'componentList'
-      },
-      {
-        title: '组件审核',
-        children: null,
-        path: 'componentReview',
-        parentKey: 'componentList'
-      }
-    ]
+    children: null
+    // children: [
+    //   {
+    //     title: '我的组件',
+    //     children: null,
+    //     path: 'myComponents',
+    //     parentKey: 'componentList'
+    //   },
+    //   {
+    //     title: '协同组件',
+    //     children: null,
+    //     path: 'matchingComponents',
+    //     parentKey: 'componentList'
+    //   },
+    //   {
+    //     title: '组件审核',
+    //     children: null,
+    //     path: 'componentReview',
+    //     parentKey: 'componentList'
+    //   }
+    // ]
   },
   {
     title: '组件编码',
diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx
index 9d1f00d..6f53ac9 100644
--- a/src/pages/ideContainer/index.tsx
+++ b/src/pages/ideContainer/index.tsx
@@ -14,6 +14,7 @@ import ProjectContainer from '@/pages/orchestration/project';
 import ApplicationContainer from '@/pages/orchestration/application';
 import EventContainer from '@/pages/orchestration/event';
 import GlobalVarContainer from '@/pages/orchestration/globalVar';
+import ComponentList from '@/pages/componentDevelopment/componentList';
 
 type UrlParamsOptions = {
   identity?: string;
@@ -33,7 +34,7 @@ const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}>组
 // 所有可显示的组件路径列表
 const ALL_PATHS = [
   'compFlow', 'appFlow', 'compList', 'appInstance', 'event', 'globalVar', 'appCompList',
-  'myComponents', 'matchingComponents', 'componentReview',
+  'myComponents', 'matchingComponents', 'componentReview', 'componentList',
   'componentCoding', 'componentDeployment', 'componentTest'
 ];
 
@@ -145,6 +146,8 @@ function IDEContainer() {
         return <MyComponents />;
       case 'matchingComponents':
         return <MatchingComponents />;
+      case 'componentList':
+        return <ComponentList />;
       case 'componentReview':
         return <ComponentReview />;
       case 'componentCoding':
@@ -216,7 +219,7 @@ function IDEContainer() {
           selected={selected}
           identity={urlParams.identity}
           subMenuData={subMenuData}
-          showSubMenu={!['event', 'globalVar', 'appCompList'].includes(selected.key)}
+          showSubMenu={['appList', 'appFlow'].includes(selected.parentKey)}
           onMenuSelect={(select) => setSelected(select)}
           onRefresh={() => getAppList()}
           onDeleteApp={(appId) => {
@@ -249,12 +252,12 @@ function IDEContainer() {
             {/*页面渲染*/}
             {renderContent()}
             {/*底部日志栏*/}
-            {urlParams.identity !== 'componentDevelopment' && !['event', 'globalVar', 'appCompList'].includes(selected.key) &&
+            {urlParams.identity !== 'componentDevelopment' && ['appList', 'appFlow'].includes(selected.parentKey) &&
               <LogBar></LogBar>}
           </div>
         </div>
 
-        {!['event', 'globalVar', 'appCompList'].includes(selected.key) && <RightSideBar></RightSideBar>}
+        {['appList', 'appFlow'].includes(selected.parentKey) && <RightSideBar></RightSideBar>}
       </div>
     </>
   );