diff --git a/src/pages/componentDevelopment/componentCoding/index.tsx b/src/pages/componentDevelopment/componentCoding/index.tsx
new file mode 100644
index 0000000..e501927
--- /dev/null
+++ b/src/pages/componentDevelopment/componentCoding/index.tsx
@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from 'react';
+import styles from './style/index.module.less';
+import { Button, Input, Select, Space, Cascader } from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+
+const Option = Select.Option;
+
+const ComponentCoding = () => {
+  const [serverUrl, setServerUrl] = useState('https://arco.design/vue/component/button');
+
+
+  useEffect(() => {
+    const uri = process.env.NEXT_PUBLIC_DEV_SERVER_HOST;
+    // const uri = 'http://api.myserver.com:4121';
+    const codeServerPrefix = '/code-server';
+    const codeServerFolderPre = '/app/data';
+    const tempData = '/000000/admin_testcode1/master';
+    setServerUrl(`${uri}${codeServerPrefix}?folder=${codeServerFolderPre}${tempData}`);
+
+  });
+
+  const componentScreening = () => {
+    // 将数据结构修改为级联结构
+    const cascaderOptions = [
+      {
+        label: '设备数采与控制交互组件',
+        value: '2',
+        children: [
+          {
+            label: 'Java:8',
+            value: '2-1',
+            children: [
+              {
+                label: '数据采集模块',
+                value: '2-1-1'
+              },
+              {
+                label: '设备控制接口',
+                value: '2-1-2'
+              }
+            ]
+          },
+          {
+            label: 'Python:3.10.12',
+            value: '2-2',
+            children: [
+              {
+                label: '数据采集模块',
+                value: '2-2-1'
+              },
+              {
+                label: '设备控制接口',
+                value: '2-2-2'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '视觉AI组件',
+        value: '3',
+        children: [
+          {
+            label: 'Java:8',
+            value: '3-1',
+            children: [
+              {
+                label: '图像识别',
+                value: '3-1-1'
+              },
+              {
+                label: '目标检测',
+                value: '3-1-2'
+              }
+            ]
+          },
+          {
+            label: 'Python:3.10.12',
+            value: '3-2',
+            children: [
+              {
+                label: '图像识别',
+                value: '3-2-1'
+              },
+              {
+                label: '目标检测',
+                value: '3-2-2'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '运动规划组件',
+        value: '4',
+        children: [
+          {
+            label: 'Java:8',
+            value: '4-1',
+            children: [
+              {
+                label: '路径规划',
+                value: '4-1-1'
+              }
+            ]
+          },
+          {
+            label: 'Python:3.10.12',
+            value: '4-2',
+            children: [
+              {
+                label: '路径规划',
+                value: '4-2-1'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '工艺知识服务组件',
+        value: '5',
+        children: [
+          {
+            label: 'Java:8',
+            value: '5-1',
+            children: [
+              {
+                label: '工艺参数优化',
+                value: '5-1-1'
+              }
+            ]
+          },
+          {
+            label: 'Python:3.10.12',
+            value: '5-2',
+            children: [
+              {
+                label: '工艺参数优化',
+                value: '5-2-1'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '时序数据AI组件',
+        value: '6',
+        children: [
+          {
+            label: 'Java:8',
+            value: '6-1',
+            children: [
+              {
+                label: '时间序列预测',
+                value: '6-1-1'
+              }
+            ]
+          },
+          {
+            label: 'Python:3.10.12',
+            value: '6-2',
+            children: [
+              {
+                label: '时间序列预测',
+                value: '6-2-1'
+              }
+            ]
+          }
+        ]
+      }
+    ];
+
+    return (
+      // 使用 Cascader 组件替换 Select 组件
+      <Cascader
+        placeholder="选择组件"
+        autoWidth={true}
+        showSearch
+        options={cascaderOptions}
+      />
+    );
+  };
+
+
+  return (
+    <div className={styles['component-coding']}>
+      <div className={styles['header']}>
+        <Space
+          size={50}
+          style={{ marginTop: '20px', marginBottom: '30px' }}
+        >
+          <div className={styles['handleRow']}>
+            <span>组件筛选：</span>
+            {componentScreening()}
+          </div>
+        </Space>
+
+        <Space>
+          <Button
+            type="primary"
+            style={{ marginLeft: 5, borderRadius: 4 }}
+          >
+            启动项设置
+          </Button>
+          <Input
+            prefix={<IconSearch />}
+            placeholder={'搜索组件关键词'}
+            style={{ width: 236 }}
+          />
+        </Space>
+
+      </div>
+
+      <div className={styles['code-iframe']}>
+        <iframe width="100%" height="100%" frameBorder={0} src={serverUrl} />
+      </div>
+    </div>
+  );
+};
+
+export default ComponentCoding;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentCoding/style/index.module.less b/src/pages/componentDevelopment/componentCoding/style/index.module.less
new file mode 100644
index 0000000..f776b4d
--- /dev/null
+++ b/src/pages/componentDevelopment/componentCoding/style/index.module.less
@@ -0,0 +1,14 @@
+.component-coding {
+  height: 98%;
+  background-color: #ffffff;
+  padding: 17px 19px 0 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .code-iframe {
+    height: 90%;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx
index 1fcaa39..4dc7ca9 100644
--- a/src/pages/ideContainer/index.tsx
+++ b/src/pages/ideContainer/index.tsx
@@ -16,6 +16,7 @@ import EventContainer from '@/pages/orchestration/event';
 import GlobalVarContainer from '@/pages/orchestration/globalVar';
 import AppCompComponent from '@/pages/orchestration/appCompComponent';
 import ComponentList from '@/pages/componentDevelopment/componentList';
+import ComponentCoding from '@/pages/componentDevelopment/componentCoding';
 
 type UrlParamsOptions = {
   identity?: string;
@@ -27,7 +28,6 @@ const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }
 const MyComponents = () => <div style={{ height: '100%', width: '100%' }}>我的组件</div>;
 const MatchingComponents = () => <div style={{ height: '100%', width: '100%' }}>协同组件</div>;
 const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}>组件审核</div>;
-const ComponentCoding = () => <div style={{ height: '100%', width: '100%' }}>组件编码</div>;
 const ComponentDeployment = () => <div style={{ height: '100%', width: '100%' }}>组件部署</div>;
 const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}>组件测试</div>;
 const EnvConfig = () => <div style={{ height: '100%', width: '100%' }}>环境配置</div>;