rename(comp): 将复合组件重命名为子流程

src/api/componentInstance.ts

@@ -51,4 +51,9 @@ export function saveComponentEnvConfig(instanceId, params) {
 // 本地启动
 export function localStart(params) {
   return axios.get(`${urlPrefix}/componentInstance/local?componentBaseId=${params.componentBaseId}`);
-}
+}
+
+// 组件资源
+export function getComponentResource(id) {
+  return axios.get(`${urlPrefix}/componentInstance/resource?id=${id}`);
+}

src/api/componentTestCase.ts

@@ -53,4 +53,9 @@ export function importTestCases(params: { componentBaseId: string, file: File })
 // 开启测试用例
 export function startTestCase(id) {
   return axios.get(`${urlPrefix}/componentTestCase/connect`, { params: { id } });
+}
+
+// 生成测试用例
+export function generateTestCase(params: { id: string, identifier: string }) {
+  return axios.post(`${urlPrefix}/componentTestCase/generationTestCase?id=${params.id}&identifier=${params.identifier}`);
 }

src/components/ResourceMonitorModal/index.module.less

@@ -0,0 +1,135 @@
+.resourceModal {
+  :global(.arco-modal-content) {
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+}
+
+.container {
+  padding: 16px;
+}
+
+.infoSection {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px 24px;
+  padding: 16px;
+  background: var(--color-fill-2);
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.label {
+  color: var(--color-text-2);
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.value {
+  color: var(--color-text-1);
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.running {
+  color: var(--color-success-6);
+}
+
+.stopped {
+  color: var(--color-danger-6);
+}
+
+.gaugeSection {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.gaugeItem {
+  background: var(--color-fill-2);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.gaugeTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin: 0 0 8px 0;
+  text-align: center;
+}
+
+.chartSection {
+  background: var(--color-fill-2);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.chartTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin: 0 0 16px 0;
+}
+
+.detailSection {
+  background: var(--color-fill-2);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.detailTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin: 0 0 16px 0;
+}
+
+.detailGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px 24px;
+}
+
+.detailItem {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  padding: 8px 0;
+}
+
+.detailLabel {
+  color: var(--color-text-2);
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.detailValue {
+  color: var(--color-text-1);
+  font-weight: 500;
+  font-family: 'Consolas', 'Monaco', monospace;
+}
+
+.noData {
+  text-align: center;
+  padding: 60px 0;
+  color: var(--color-text-3);
+  font-size: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .infoSection,
+  .gaugeSection,
+  .detailGrid {
+    grid-template-columns: 1fr;
+  }
+}

src/components/ResourceMonitorModal/index.tsx

@@ -0,0 +1,369 @@
+import React from 'react';
+import { Modal } from '@arco-design/web-react';
+import ReactECharts from 'echarts-for-react';
+import type { EChartsOption } from 'echarts';
+import styles from './index.module.less';
+
+interface ResourceData {
+  collectedAt: number;
+  containerName: string;
+  cpuPercent: number;
+  elapsedSeconds: number;
+  identifier: string;
+  instanceId: string;
+  memLimitBytes: number;
+  memLimitMb: number;
+  memPercent: number;
+  message: string;
+  pid: number;
+  rssBytes: number;
+  rssKb: number;
+  rssMb: number;
+  running: boolean;
+  vsizeKb: number;
+}
+
+interface ResourceMonitorModalProps {
+  visible: boolean;
+  onCancel: () => void;
+  data: ResourceData | null;
+}
+
+const ResourceMonitorModal: React.FC<ResourceMonitorModalProps> = ({
+  visible,
+  onCancel,
+  data,
+}) => {
+  // 格式化运行时长
+  const formatElapsedTime = (seconds: number): string => {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    const parts = [];
+    if (days > 0) parts.push(`${days}天`);
+    if (hours > 0) parts.push(`${hours}小时`);
+    if (minutes > 0) parts.push(`${minutes}分钟`);
+    if (secs > 0 || parts.length === 0) parts.push(`${secs}秒`);
+
+    return parts.join(' ');
+  };
+
+  // CPU 使用率仪表盘配置
+  const getCpuGaugeOption = (): EChartsOption => {
+    return {
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 180,
+          endAngle: 0,
+          min: 0,
+          max: 100,
+          splitNumber: 10,
+          itemStyle: {
+            color: data && data.cpuPercent > 80 ? '#F53F3F' : data && data.cpuPercent > 50 ? '#FF7D00' : '#00B42A',
+          },
+          progress: {
+            show: true,
+            width: 18,
+          },
+          pointer: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 18,
+            },
+          },
+          axisTick: {
+            distance: -30,
+            splitNumber: 5,
+            lineStyle: {
+              width: 2,
+              color: '#999',
+            },
+          },
+          splitLine: {
+            distance: -40,
+            length: 14,
+            lineStyle: {
+              width: 3,
+              color: '#999',
+            },
+          },
+          axisLabel: {
+            distance: -20,
+            color: '#999',
+            fontSize: 14,
+          },
+          anchor: {
+            show: false,
+          },
+          title: {
+            show: false,
+          },
+          detail: {
+            valueAnimation: true,
+            width: '60%',
+            lineHeight: 40,
+            borderRadius: 8,
+            offsetCenter: [0, '10%'],
+            fontSize: 40,
+            fontWeight: 'bolder',
+            formatter: '{value}%',
+            color: 'inherit',
+          },
+          data: [
+            {
+              value: data?.cpuPercent || 0,
+              name: 'CPU 使用率',
+            },
+          ],
+        },
+      ],
+    };
+  };
+
+  // 内存使用率仪表盘配置
+  const getMemoryGaugeOption = (): EChartsOption => {
+    return {
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 180,
+          endAngle: 0,
+          min: 0,
+          max: 100,
+          splitNumber: 10,
+          itemStyle: {
+            color: data && data.memPercent > 80 ? '#F53F3F' : data && data.memPercent > 50 ? '#FF7D00' : '#00B42A',
+          },
+          progress: {
+            show: true,
+            width: 18,
+          },
+          pointer: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 18,
+            },
+          },
+          axisTick: {
+            distance: -30,
+            splitNumber: 5,
+            lineStyle: {
+              width: 2,
+              color: '#999',
+            },
+          },
+          splitLine: {
+            distance: -40,
+            length: 14,
+            lineStyle: {
+              width: 3,
+              color: '#999',
+            },
+          },
+          axisLabel: {
+            distance: -20,
+            color: '#999',
+            fontSize: 14,
+          },
+          anchor: {
+            show: false,
+          },
+          title: {
+            show: false,
+          },
+          detail: {
+            valueAnimation: true,
+            width: '60%',
+            lineHeight: 40,
+            borderRadius: 8,
+            offsetCenter: [0, '10%'],
+            fontSize: 40,
+            fontWeight: 'bolder',
+            formatter: '{value}%',
+            color: 'inherit',
+          },
+          data: [
+            {
+              value: data?.memPercent || 0,
+              name: '内存使用率',
+            },
+          ],
+        },
+      ],
+    };
+  };
+
+  // 内存详情柱状图配置
+  const getMemoryBarOption = (): EChartsOption => {
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+        formatter: (params: any) => {
+          const param = params[0];
+          return `${param.name}: ${param.value.toFixed(2)} MB`;
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: ['已使用内存 (RSS)', '内存限制'],
+        axisLabel: {
+          interval: 0,
+          rotate: 0,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        name: 'MB',
+        axisLabel: {
+          formatter: '{value}',
+        },
+      },
+      series: [
+        {
+          name: '内存',
+          type: 'bar',
+          data: [
+            {
+              value: data?.rssMb || 0,
+              itemStyle: {
+                color: '#3491FA',
+              },
+            },
+            {
+              value: data?.memLimitMb || 0,
+              itemStyle: {
+                color: '#86909C',
+              },
+            },
+          ],
+          barWidth: '40%',
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} MB',
+          },
+        },
+      ],
+    };
+  };
+
+  return (
+    <Modal
+      title="组件资源监控"
+      visible={visible}
+      onCancel={onCancel}
+      footer={null}
+      style={{ width: '900px' }}
+      className={styles.resourceModal}
+    >
+      {data ? (
+        <div className={styles.container}>
+          {/* 基本信息 */}
+          <div className={styles.infoSection}>
+            <div className={styles.infoItem}>
+              <span className={styles.label}>容器名称:</span>
+              <span className={styles.value}>{data.containerName}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <span className={styles.label}>实例标识:</span>
+              <span className={styles.value}>{data.identifier}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <span className={styles.label}>进程 ID:</span>
+              <span className={styles.value}>{data.pid}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <span className={styles.label}>运行状态:</span>
+              <span className={`${styles.value} ${data.running ? styles.running : styles.stopped}`}>
+                {data.running ? '运行中' : '已停止'}
+              </span>
+            </div>
+            <div className={styles.infoItem}>
+              <span className={styles.label}>运行时长:</span>
+              <span className={styles.value}>{formatElapsedTime(data.elapsedSeconds)}</span>
+            </div>
+            <div className={styles.infoItem}>
+              <span className={styles.label}>采集时间:</span>
+              <span className={styles.value}>
+                {new Date(data.collectedAt).toLocaleString('zh-CN')}
+              </span>
+            </div>
+          </div>
+
+          {/* 仪表盘区域 */}
+          <div className={styles.gaugeSection}>
+            <div className={styles.gaugeItem}>
+              <h3 className={styles.gaugeTitle}>CPU 使用率</h3>
+              <ReactECharts
+                option={getCpuGaugeOption()}
+                style={{ height: '280px', width: '100%' }}
+                notMerge={true}
+              />
+            </div>
+            <div className={styles.gaugeItem}>
+              <h3 className={styles.gaugeTitle}>内存使用率</h3>
+              <ReactECharts
+                option={getMemoryGaugeOption()}
+                style={{ height: '280px', width: '100%' }}
+                notMerge={true}
+              />
+            </div>
+          </div>
+
+          {/* 内存详情柱状图 */}
+          <div className={styles.chartSection}>
+            <h3 className={styles.chartTitle}>内存使用详情</h3>
+            <ReactECharts
+              option={getMemoryBarOption()}
+              style={{ height: '300px', width: '100%' }}
+              notMerge={true}
+            />
+          </div>
+
+          {/* 详细数据 */}
+          <div className={styles.detailSection}>
+            <h3 className={styles.detailTitle}>详细数据</h3>
+            <div className={styles.detailGrid}>
+              <div className={styles.detailItem}>
+                <span className={styles.detailLabel}>RSS 内存 (KB):</span>
+                <span className={styles.detailValue}>{data.rssKb.toLocaleString()}</span>
+              </div>
+              <div className={styles.detailItem}>
+                <span className={styles.detailLabel}>RSS 内存 (Bytes):</span>
+                <span className={styles.detailValue}>{data.rssBytes.toLocaleString()}</span>
+              </div>
+              <div className={styles.detailItem}>
+                <span className={styles.detailLabel}>虚拟内存 (KB):</span>
+                <span className={styles.detailValue}>{data.vsizeKb.toLocaleString()}</span>
+              </div>
+              <div className={styles.detailItem}>
+                <span className={styles.detailLabel}>内存限制 (Bytes):</span>
+                <span className={styles.detailValue}>{data.memLimitBytes.toLocaleString()}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.noData}>暂无数据</div>
+      )}
+    </Modal>
+  );
+};
+
+export default ResourceMonitorModal;

src/locale/index.ts

@@ -99,7 +99,7 @@ const i18n = {
     'menu.instance': '应用实例',
     'menu.componentDevelopment': '组件开发',
     'menu.componentLibrary': '组件库',
-    'menu.compositeCompLibrary': '复合组件库',
+    'menu.compositeCompLibrary': '子流程库',
     'menu.componentMarket': '组件市场',
     'menu.componentMarket.compDetails': '组件详情',
     'navbar.logout': '退出登录',

src/pages/componentDevelopment/componentDeployment/listNode.tsx

@@ -19,12 +19,14 @@ import {
   startInstance,
   stopInstance,
   getInstanceLog,
-  refreshInstanceDependency
+  refreshInstanceDependency,
+  getComponentResource
 } from '@/api/componentInstance';
 import { runStatusConstant, runStatusDic, runTypeConstant, runTypeDic } from '@/const/isdp/componentDeploy';
 import dayjs from 'dayjs';
 import EditInstanceModal from './editInstanceModal';
 import EnvConfigModal from './envConfigModal';
+import ResourceMonitorModal from '@/components/ResourceMonitorModal';
 
 const { RangePicker } = DatePicker;
 const { TextArea } = Input;
@@ -59,6 +61,10 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
   const [envModalVisible, setEnvModalVisible] = useState(false);
   const [envInstanceId, setEnvInstanceId] = useState<string>('');
 
+  // 资源监控 Modal 相关状态
+  const [resourceModalVisible, setResourceModalVisible] = useState(false);
+  const [resourceData, setResourceData] = useState<any>(null);
+
   // 获取实例列表
   const fetchInstanceList = async () => {
     if (!componentData?.identifier) return;
@@ -306,6 +312,22 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
     fetchInstanceList(); // 刷新列表
   };
 
+  // 查看组件资源
+  const handeViewResource = async (record) => {
+    try {
+      const res: any = await getComponentResource(record.id);
+      if (res.code === 200 && res.data) {
+        setResourceData(res.data);
+        setResourceModalVisible(true);
+      } else {
+        Message.error(res.msg || '获取资源信息失败');
+      }
+    } catch (error) {
+      console.error('获取资源信息失败:', error);
+      Message.error('获取资源信息失败');
+    }
+  };
+
   const columns: TableColumnProps[] = [
     {
       title: '#',
@@ -378,6 +400,9 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
               {!isRunning && (
                 <Button type="text" onClick={() => handleOpenEnvConfig(record)}>环境配置</Button>
               )}
+              {!isLocalRun && isRunning && (
+                <Button type="text" onClick={() => handeViewResource(record)}>组件资源</Button>
+              )}
               <Button type="text"
                       onClick={() => handleOpenEdit(record)}
                       icon={<img
@@ -509,6 +534,13 @@ const ListNode: React.FC<ListNodeProps> = ({ componentData }) => {
         onCancel={handleEnvConfigCancel}
         onSuccess={handleEnvConfigSuccess}
       />
+
+      {/* 资源监控 Modal */}
+      <ResourceMonitorModal
+        visible={resourceModalVisible}
+        onCancel={() => setResourceModalVisible(false)}
+        data={resourceData}
+      />
     </>
   );
 };

src/pages/componentDevelopment/componentTest/testInstance.tsx

@@ -9,7 +9,10 @@ import {
   deleteTestCase,
   exportTemplate,
   exportTestCases,
-  importTestCases, startTestCase, sendTestCase
+  importTestCases,
+  startTestCase,
+  sendTestCase,
+  generateTestCase
 } from '@/api/componentTestCase';
 import TestCaseModal from './testCaseModal';
 import useWebSocket from '@/hooks/useWebSocket';
@@ -309,6 +312,17 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
     setEditingTestCase(null);
   };
 
+  const handleGenerateTestCases = async () => {
+    const res: any = await generateTestCase({ id: design?.baseInfo.id, identifier: instance.identifier });
+    if (res.code === 200) {
+      Message.success('生成测试用例成功');
+      getTestCaseList();
+    }
+    else {
+      Message.error(res.msg);
+    }
+  };
+
   return (
     <div className={styles['test-instance']}>
       {/* 隐藏的文件input */}
@@ -334,6 +348,13 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
           </Button>
         </div>
         <div className={styles['tab-center']}>
+          <Button
+            type="outline"
+            status="success"
+            onClick={handleGenerateTestCases}
+          >
+            一键生成测试用例
+          </Button>
           <Button
             type="outline"
             onClick={handleExportTemplate}
@@ -346,12 +367,6 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
           >
             从模板导入用例
           </Button>
-          {/*<Button*/}
-          {/*  type="outline"*/}
-          {/*  onClick={() => setActiveTab('batch')}*/}
-          {/*>*/}
-          {/*  一键生成测试用例*/}
-          {/*</Button>*/}
           <Button
             type="outline"
             onClick={handleExportTestCases}

src/pages/componentDevelopment/systemResource/index.tsx

@@ -0,0 +1,38 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+const SystemResource = () => {
+  const iframeRef = useRef(null);
+
+  // 根据当前访问的 hostname 动态生成服务器 URL
+  const getServerUrl = () => {
+    const currentHostname = window.location.hostname;
+
+    // 如果是 localhost 或 127.0.0.1，使用固定的 IP
+    if (currentHostname === 'localhost' || currentHostname === '127.0.0.1') {
+      return 'http://192.168.5.119:5001/';
+    }
+
+    // 否则使用当前的 IP 加 5001 端口
+    return `http://${currentHostname}:5001/`;
+  };
+
+  const [serverUrl, setServerUrl] = useState(getServerUrl());
+
+  // 监听 URL 变化（如果需要动态更新）
+  useEffect(() => {
+    const handleLocationChange = () => {
+      setServerUrl(getServerUrl());
+    };
+
+    // 监听 popstate 事件（浏览器前进后退）
+    window.addEventListener('popstate', handleLocationChange);
+
+    return () => {
+      window.removeEventListener('popstate', handleLocationChange);
+    };
+  }, []);
+
+  return <iframe width="100%" height="100%" frameBorder={0} src={serverUrl} ref={iframeRef} />;
+};
+
+export default SystemResource;

src/pages/compositeCompLibrary/index.tsx

@@ -26,7 +26,7 @@ function CompositeCompLibrary() {
               key="minePage"
               title={
                 <span>
-                  <span>我的复合组件</span>
+                  <span>我的子流程</span>
                 </span>
               }
             >
@@ -36,7 +36,7 @@ function CompositeCompLibrary() {
               key="publicList"
               title={
                 <span>
-                  <span>公开复合组件</span>
+                  <span>公开子流程</span>
                 </span>
               }>
               <CompGrid componentType="publicList" />

src/pages/flowEditor/components/addNodeMenu.tsx

@@ -63,7 +63,7 @@ const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
       initialGroupedNodes['composite'] = projectFlowList.map((v: any) => {
         return {
           ...v,
-          nodeName: v?.main?.name || '复合组件',
+          nodeName: v?.main?.name || '子流程',
           nodeType: 'SUB',
           nodeGroup: 'composite',
           data: {
@@ -137,7 +137,7 @@ const AddNodeMenu: React.FC<AddNodeMenuProps> = ({
   // 分组名称映射
   const groupNames: Record<string, string> = {
     'application': '基础组件',
-    'composite': '复合组件',
+    'composite': '子流程',
     'common': '系统组件'
   };
 

src/pages/flowEditor/components/nodeContextMenu.tsx

@@ -42,7 +42,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
       // 创建自定义事件来通知打开新标签页
       const customDef = isJSON((node as any).data.component.customDef) ? JSON.parse((node as any).data.component.customDef) : {};
       if (Object.keys(customDef).length === 0) {
-        Message.warning('新导入的复合组件请保存后再进行编辑！');
+        Message.warning('新导入的子流程请保存后再进行编辑！');
       }
       const openTabEvent = new CustomEvent('openSubNodeTab', {
         detail: { node }

src/pages/flowEditor/sideBar/sideBar.tsx

@@ -23,7 +23,7 @@ const SideBar: React.FC = () => {
       <Collapse bordered={false} accordion>
         <CollapseItem header="应用组件" name="1">
         </CollapseItem>
-        <CollapseItem header="复合组件" name="2">
+        <CollapseItem header="子流程" name="2">
         </CollapseItem>
         <CollapseItem header="系统组件" name="3">
           {localNodeData.map((item, index) => (

src/pages/flowEditor/utils/common.ts

@@ -7,8 +7,8 @@ export const handelEventNodeList = (newRevertedData) => {
   const deleteEventSendNodeList = [];
   const deleteEventlisteneList = [];
   // 处理流程接口后的数据,这里是原始数据的依据
-  const currentEventSendNodeList = current.eventSendNodeList;
+  const currentEventSendNodeList = current?.eventSendNodeList || [];
-  const currentEventlisteneList = current.eventlisteneList;
+  const currentEventlisteneList = current?.eventlisteneList || [];
   // 画布数据
   const nodeEntries: [string, any][] = Object.entries(newRevertedData);
 

src/pages/ideContainer/config/menuData.ts

@@ -111,7 +111,14 @@ export const menuData2 = [
     icon: '/ideContainer/icon/envConfig.png',
     activeIcon: '/ideContainer/icon/envConfig_active.png',
     children: null
+  },
+  {
+    title: '系统资源',
+    path: 'systemResource',
+    key: 'systemResource',
+    parentKey: 'systemResource',
+    icon: '/ideContainer/icon/sysResource.png',
+    activeIcon: '/ideContainer/icon/sysResource_active.png',
+    children: null
   }
-];
+];
-
-// export const tempEnvData =

src/pages/ideContainer/index.tsx

@@ -31,6 +31,7 @@ import ComponentCoding from '@/pages/componentDevelopment/componentCoding';
 import ComponentDeployment from '@/pages/componentDevelopment/componentDeployment';
 import ComponentTest from '@/pages/componentDevelopment/componentTest';
 import ComponentEnv from '@/pages/componentDevelopment/componentEnv';
+import SystemResource from '@/pages/componentDevelopment/systemResource';
 import { getUserToken } from '@/api/user';
 import { Message } from '@arco-design/web-react';
 import { queryEventItemBySceneId, queryEventItemBySceneIdOld } from '@/api/event';
@@ -51,7 +52,8 @@ const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}>组
 const ALL_PATHS = [
   'compFlow', 'complexFlow', 'appFlow', 'compList', 'appInstance', 'event', 'globalVar', 'appCompList',
   'myComponents', 'matchingComponents', 'componentReview', 'componentList',
-  'componentCoding', 'componentDeployment', 'componentTest', 'envConfig'
+  'componentCoding', 'componentDeployment', 'componentTest', 'envConfig',
+  'systemResource'
 ];
 
 function IDEContainer() {
@@ -183,7 +185,7 @@ function IDEContainer() {
         }
       }
       else {
-        Message.error('未找到对应的复合组件');
+        Message.error('未找到对应的子流程');
       }
     };
 
@@ -380,6 +382,8 @@ function IDEContainer() {
         return <ComponentTest />;
       case 'envConfig':
         return <ComponentEnv />;
+      case 'systemResource':
+        return <SystemResource />;
       default:
         return <div>未知页面</div>;
     }

src/pages/ideContainer/market.tsx

@@ -296,7 +296,7 @@ const Market: React.FC<MarketProps> = ({ updateProjectComp }) => {
 
     // 处理复合组件
     if (flowComponents.length > 0) {
-      const label = '复合组件';
+      const label = '子流程';
       if (!mergedComponents[label]) {
         mergedComponents[label] = {
           label: label,

src/pages/ideContainer/sideBar.tsx

@@ -73,7 +73,7 @@ interface SideBarProps {
 
 const compTypeMap = {
   appComponent: '普通组件',
-  subComponent: '复合组件'
+  subComponent: '子流程'
 };
 
 

src/pages/orchestration/appCompComponent/sideBar.tsx

@@ -64,7 +64,7 @@ const SideBar = ({ compList, onSelect }) => {
         icon: <img src={'/ideContainer/icon/projectComp.png'} style={{ width: 17, height: 17 }} />
       }],
       ['projectFlowDto', {
-        title: '复合组件',
+        title: '子流程',
         icon: <img src={'/ideContainer/icon/projectComp.png'} style={{ width: 17, height: 17 }} />
       }],
       ['mineComp', {