feat(component): 添加组件列表页面

- 在 ideContainer 中引入并注册 componentList 路由- 新增 componentList 页面组件及样式文件
- 更新菜单配置，将 componentList 添加到导航路径中- 调整右侧边栏和日志栏的显示逻辑，支持组件列表页面展示
- 实现组件列表页面的基础布局与交互功能

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;

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 {
+
+    }
+  }
+}

src/pages/componentDevelopment/index.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-function ComponentDevelopment() {
-  return (
-    <>
-      <div>
-        组件开发
-      </div>
-    </>
-  );
-}
-
-export default ComponentDevelopment;

src/pages/ideContainer/config/menuData.ts

@@ -72,28 +72,30 @@ export const menuData1 = [
 export const menuData2 = [
   {
     title: '组件列表',
+    path: 'componentList',
     key: 'componentList',
     parentKey: 'componentList',
-    children: [
+    children: null
-      {
+    // children: [
-        title: '我的组件',
+    //   {
-        children: null,
+    //     title: '我的组件',
-        path: 'myComponents',
+    //     children: null,
-        parentKey: 'componentList'
+    //     path: 'myComponents',
-      },
+    //     parentKey: 'componentList'
-      {
+    //   },
-        title: '协同组件',
+    //   {
-        children: null,
+    //     title: '协同组件',
-        path: 'matchingComponents',
+    //     children: null,
-        parentKey: 'componentList'
+    //     path: 'matchingComponents',
-      },
+    //     parentKey: 'componentList'
-      {
+    //   },
-        title: '组件审核',
+    //   {
-        children: null,
+    //     title: '组件审核',
-        path: 'componentReview',
+    //     children: null,
-        parentKey: 'componentList'
+    //     path: 'componentReview',
-      }
+    //     parentKey: 'componentList'
-    ]
+    //   }
+    // ]
   },
   {
     title: '组件编码',

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>
     </>
   );