feat(componentDeployment): 添加组件部署列表中的自定义logo显示功能

src/components/FlowEditor/nodeEditors/components/CodeEditor.tsx

@@ -17,33 +17,40 @@ const CodeEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) =>
       const defaultData = {
         customDef: {
           languageId: '63', // 默认 Java
-          sourceCode: '/**\n' +
-            'ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改\n' +
-            '当前版本gson-2.10.1.jar的文档地址：\n' +
-            'https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html\n' +
-            '*/\n' +
-            'import com.google.gson.JsonObject;\n' +
-            'class ExecClass{  \n' +
-            '  public JsonObject main(JsonObject args){\n' +
-            '    return args;\n' +
-            '  }\n' +
-            '}'
+          sourceCode:
+`/**
+ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改
+当前版本gson-2.10.1.jar的文档地址：
+https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html
+*/
+import com.google.gson.JsonObject;
+class ExecClass{  
+  public JsonObject main(JsonObject args){
+    return args;
+  }
+}`
         },
         extra: {
-          java: '/**\n' +
-            'ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改\n' +
-            '当前版本gson-2.10.1.jar的文档地址：\n' +
-            'https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html\n' +
-            '*/\n' +
-            'import com.google.gson.JsonObject;\n' +
-            'class ExecClass{  \n' +
-            '  public JsonObject main(JsonObject args){\n' +
-            '    return args;\n' +
-            '  }\n' +
-            '}',
-          python: '# main函数是启动函数，参数类型、个数、返回类型不可更改\n' +
-            'def main(a:dict)->dict:\n' +
-            '  return {\'b\': a.get(\'a\')+[4,5]}'
+          java:
+`/**
+ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改
+当前版本gson-2.10.1.jar的文档地址：
+https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html
+*/
+import com.google.gson.JsonObject;
+class ExecClass{  
+  public JsonObject main(JsonObject args){
+    return args;
+  }
+}`
+          ,
+          python:
+`# main函数是启动函数，参数类型、个数、返回类型不可更改
+def main(params):
+  data = {
+    
+  }
+return data`
         },
         type: 'CODE'
       };

src/components/FlowEditor/nodeEditors/components/CodeMirror.tsx

@@ -23,20 +23,25 @@ interface CodeMirrorProps {
 const extensions = [java(), python(), githubLight];
 const options = ['java', 'python'];
 const defaultCode = {
-  'java': '/**\n' +
-    'ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改\n' +
-    '当前版本gson-2.10.1.jar的文档地址：\n' +
-    'https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html\n' +
-    '*/\n' +
-    'import com.google.gson.JsonObject;\n' +
-    'class ExecClass{  \n' +
-    '  public JsonObject main(JsonObject args){\n' +
-    '    return args;\n' +
-    '  }\n' +
-    '}',
-  'python': '# main函数是启动函数，参数类型、个数、返回类型不可更改\n' +
-    'def main(a:dict)->dict:\n' +
-    '  return {\'b\': a.get(\'a\')+[4,5]}'
+  'java':
+    `/**
+ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改
+当前版本gson-2.10.1.jar的文档地址：
+https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html
+*/
+import com.google.gson.JsonObject;
+class ExecClass{  
+  public JsonObject main(JsonObject args){
+    return args;
+  }
+}`,
+  'python':
+    `# main函数是启动函数，参数类型、个数、返回类型不可更改
+def main(params):
+  data = {
+    
+  }
+return data`
 };
 const nameToCode = {
   'java': '63',

src/pages/componentDevelopment/componentDeployment/collapseList.tsx

@@ -24,9 +24,10 @@ const CollapseItem = Collapse.Item;
 interface CollapseListProps {
   searchKeyword?: string;
   runStatus?: string;
+  componentClassify?: string;
 }
 
-const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus }) => {
+const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus, componentClassify }) => {
   const [collapses, setCollapses] = useState([]);
   const [visible, setVisible] = useState(false);
   const [showOffSaleModal, setShowOffSaleModal] = useState(false);
@@ -56,6 +57,11 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
       params.runStatus = runStatus;
     }
 
+    // 添加组件分类筛选
+    if (componentClassify) {
+      params.componentClassify = componentClassify;
+    }
+
     const res: any = await getDeployList(params);
     if (res.code === 200) {
       setCollapses(res.data.list.reverse());
@@ -128,7 +134,7 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
   useEffect(() => {
     setCurrent(1); // 搜索条件变化时重置到第一页
     getList(1, pageSize);
-  }, [searchKeyword, runStatus]);
+  }, [searchKeyword, runStatus, componentClassify]);
 
   // 折叠面板头部
   const headerNode = (item) => {
@@ -142,8 +148,12 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
     return (
       <div className={styles['header-node']}>
         <Space size={7} style={{ marginRight: 50 }}>
-          <img src="https://picsum.photos/200/300"
-               style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
+          {item.logoUrl ?
+            <img src={item.logoUrl}
+                 style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} /> :
+            <img src="https://picsum.photos/200/300"
+                 style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
+          }
           <div>{item.name}</div>
         </Space>
 

src/pages/componentDevelopment/componentDeployment/index.tsx

@@ -1,16 +1,33 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './style/index.module.less';
-import { Button, Input, Modal, Radio, Space } from '@arco-design/web-react';
+import { Button, Input, Modal, Radio, Space, Select } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import CollapseList from './collapseList';
 import { startStatusConstant } from '@/const/isdp/componentDeploy';
 import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial';
+import { getComponentClassify } from '@/api/componentClassify';
 
 const ComponentDeployment = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
+  const [debouncedKeyword, setDebouncedKeyword] = useState('');
+  const [selectedClassify, setSelectedClassify] = useState<string | undefined>(undefined);
+  const [classifyOptions, setClassifyOptions] = useState<{ label: string; value: string }[]>([]);
   const [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
   const [tutorialVisible, setTutorialVisible] = useState(false);
 
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
+    return () => clearTimeout(timer);
+  }, [searchKeyword]);
+
+  useEffect(() => {
+    getComponentClassify('component').then((res: any) => {
+      if (res.code === 200) {
+        setClassifyOptions(res.data.map((item) => ({ label: item.classifyName, value: item.classifyName })));
+      }
+    });
+  }, []);
+
   // 状态选项配置
   const statusOptions = [
     { label: '全部', value: undefined },
@@ -43,6 +60,14 @@ const ComponentDeployment = () => {
           </Radio.Group>
 
           <Space>
+            <Select
+              placeholder="组件分类"
+              allowClear
+              style={{ width: 160 }}
+              value={selectedClassify}
+              onChange={(value) => setSelectedClassify(value)}
+              options={classifyOptions}
+            />
             <Input
               prefix={<IconSearch />}
               placeholder={'搜索'}
@@ -63,7 +88,8 @@ const ComponentDeployment = () => {
           </Space>
         </div>
         <div className={styles['content']}>
-          <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
+          <CollapseList searchKeyword={debouncedKeyword} runStatus={selectedStatus}
+                        componentClassify={selectedClassify} />
         </div>
       </div>
 

src/pages/componentDevelopment/componentEnv/index.tsx

@@ -435,7 +435,10 @@ const ComponentEnv = () => {
           </div>
         </div>
 
-        <Table columns={columns} data={data} scroll={{ x: 1200 }} />
+        <Table columns={columns} data={data} scroll={{ x: 1200 }} style={{
+          height: '80%',
+          overflow: 'auto'
+        }} />
 
         <AddModal
           visible={visible}

src/pages/componentDevelopment/componentList/addApiModal.tsx

@@ -144,10 +144,23 @@ const AddApiModal = ({
             {
               required: true,
               message: '请输入接口名称'
+            },
+            {
+              validator: (value, cb) => {
+                if (!value) {
+                  return cb();
+                }
+                // 只允许英文字母、数字和下划线
+                const pattern = /^[a-zA-Z0-9_]+$/;
+                if (!pattern.test(value)) {
+                  return cb('接口名称只能包含英文字母、数字和下划线');
+                }
+                return cb();
+              }
             }
           ]}
         >
-          <Input placeholder="请输入接口名称" />
+          <Input placeholder="请输入接口名称（仅支持英文字母、数字和下划线）" />
         </FormItem>
         <FormItem label="描述" field="desc">
           <TextArea placeholder="请输入描述" />

src/pages/componentDevelopment/componentList/addComponentModal.tsx

@@ -590,7 +590,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
               <div
                 style={{
                   width: '80%',
-                  height: 200
+                  height: "40vh",
+                  overflow: 'auto'
                 }}
               >
                 <CompReview componentDesignData={componentDesignData} />
@@ -621,7 +622,11 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
                       if (!value) {
                         return cb('请输入代码标识');
                       }
-
+                      // 只允许英文字母、数字和下划线
+                      const pattern = /^[a-zA-Z0-9_]+$/;
+                      if (!pattern.test(value)) {
+                        return cb('代码标识只能包含英文字母、数字和下划线');
+                      }
                       return cb();
                     }
                   }
@@ -629,7 +634,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
                   <Input
                     style={{ width: '90%' }}
                     allowClear
-                    placeholder="请输入代码标识"
+                    placeholder="请输入代码标识（仅支持英文字母、数字和下划线）"
                     disabled={isReadOnly || created || isEditMode}
                     onChange={(e) => debouncedValidateProjectId(e)}
                   />

src/pages/componentDevelopment/componentList/compReview.tsx

@@ -57,27 +57,29 @@ const CompReview = ({ componentDesignData }) => {
             <div className={styles['comp-review-output']}>
               <div className={styles['comp-review-io-label']}>output</div>
               <div className={styles['comp-review-io-items']}>
-                {dataArray.map((data, index) => {
-                  // 确保响应始终是数组格式
+                {dataArray.every((data) => {
                   const responses = Array.isArray(data.responses) ? data.responses :
                     (data.responses ? [data.responses] : []);
-
-                  return (
-                    <div key={data.key || data.id || index}>
-                      {responses.length > 0 ? (
-                        responses.map((response, responseIndex) => (
+                  return responses.length === 0;
+                }) ? (
+                  <div className={styles['comp-review-io-placeholder']}>
+                    无输出参数
+                  </div>
+                ) : (
+                  dataArray.map((data, index) => {
+                    const responses = Array.isArray(data.responses) ? data.responses :
+                      (data.responses ? [data.responses] : []);
+                    return (
+                      <div key={data.key || data.id || index}>
+                        {responses.map((response, responseIndex) => (
                           <div key={responseIndex} className={styles['comp-review-io-item']}>
                             {response.type} {response.ident}
                           </div>
-                        ))
-                      ) : (
-                        <div className={styles['comp-review-io-placeholder']}>
-                          无输出参数
-                        </div>
-                      )}
-                    </div>
-                  );
-                })}
+                        ))}
+                      </div>
+                    );
+                  })
+                )}
               </div>
             </div>
           </div>

src/pages/componentDevelopment/componentList/editableTable.tsx

@@ -23,6 +23,8 @@ const arrayTypeOptions = [
 ];
 
 function EditableCell({ value, onChange, columnType, record, dataIndex }) {
+  const [error, setError] = useState('');
+
   // 对于数组类型字段的特殊处理
   if (dataIndex === 'generic') {
     // 仅当数据类型为 ARRAY 时才可编辑
@@ -43,6 +45,33 @@ function EditableCell({ value, onChange, columnType, record, dataIndex }) {
   }
 
   if (columnType === 'input') {
+    // 对于 ident 字段（名称列）添加验证
+    if (dataIndex === 'ident') {
+      const handleIdentChange = (val) => {
+        // 验证是否只包含英文字母、数字和下划线
+        const pattern = /^[a-zA-Z0-9_]*$/;
+        if (val && !pattern.test(val)) {
+          setError('只能包含英文字母、数字和下划线');
+          Message.error('参数名称只能包含英文字母、数字和下划线');
+          return;
+        }
+        setError('');
+        onChange(val);
+      };
+
+      return (
+        <div>
+          <Input
+            value={value}
+            onChange={handleIdentChange}
+            placeholder="请输入（仅支持英文字母、数字和下划线）"
+            status={error ? 'error' : undefined}
+          />
+          {error && <div style={{ color: '#f53f3f', fontSize: 12, marginTop: 4 }}>{error}</div>}
+        </div>
+      );
+    }
+
     return (
       <Input
         value={value}

src/pages/flowEditor/components/nodeEditModal.tsx

@@ -88,7 +88,7 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
         minWidth: 300,
         width: 'max-content',
         maxWidth: '80%',
-        height: '90%',
+        height: '99%',
         bottom: 0,
         borderRadius: 10
       }}