Compare commits

..

No commits in common. 'eed8b829634e6055bf4b613e99f69a7d9aa051af' and '8c22b8c89568063dfa2c5ccfad8edb09efcd72a0' have entirely different histories.

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

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

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

@ -1,33 +1,16 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import styles from './style/index.module.less'; import styles from './style/index.module.less';
import { Button, Input, Modal, Radio, Space, Select } from '@arco-design/web-react'; import { Button, Input, Modal, Radio, Space } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon'; import { IconSearch } from '@arco-design/web-react/icon';
import CollapseList from './collapseList'; import CollapseList from './collapseList';
import { startStatusConstant } from '@/const/isdp/componentDeploy'; import { startStatusConstant } from '@/const/isdp/componentDeploy';
import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial'; import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial';
import { getComponentClassify } from '@/api/componentClassify';
const ComponentDeployment = () => { const ComponentDeployment = () => {
const [searchKeyword, setSearchKeyword] = useState(''); 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 [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
const [tutorialVisible, setTutorialVisible] = useState(false); 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 = [ const statusOptions = [
{ label: '全部', value: undefined }, { label: '全部', value: undefined },
@ -60,14 +43,6 @@ const ComponentDeployment = () => {
</Radio.Group> </Radio.Group>
<Space> <Space>
<Select
placeholder="组件分类"
allowClear
style={{ width: 160 }}
value={selectedClassify}
onChange={(value) => setSelectedClassify(value)}
options={classifyOptions}
/>
<Input <Input
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder={'搜索'} placeholder={'搜索'}
@ -88,8 +63,7 @@ const ComponentDeployment = () => {
</Space> </Space>
</div> </div>
<div className={styles['content']}> <div className={styles['content']}>
<CollapseList searchKeyword={debouncedKeyword} runStatus={selectedStatus} <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
componentClassify={selectedClassify} />
</div> </div>
</div> </div>

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

@ -144,23 +144,10 @@ const AddApiModal = ({
{ {
required: true, required: true,
message: '请输入接口名称' 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>
<FormItem label="描述" field="desc"> <FormItem label="描述" field="desc">
<TextArea placeholder="请输入描述" /> <TextArea placeholder="请输入描述" />

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

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

@ -23,8 +23,6 @@ const arrayTypeOptions = [
]; ];
function EditableCell({ value, onChange, columnType, record, dataIndex }) { function EditableCell({ value, onChange, columnType, record, dataIndex }) {
const [error, setError] = useState('');
// 对于数组类型字段的特殊处理 // 对于数组类型字段的特殊处理
if (dataIndex === 'generic') { if (dataIndex === 'generic') {
// 仅当数据类型为 ARRAY 时才可编辑 // 仅当数据类型为 ARRAY 时才可编辑
@ -45,33 +43,6 @@ function EditableCell({ value, onChange, columnType, record, dataIndex }) {
} }
if (columnType === 'input') { 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 ( return (
<Input <Input
value={value} value={value}

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

Loading…
Cancel
Save