ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2025-10-23 12:49:08 +08:00
parent fc1d7da919
commit 175e33ce4f
1 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/pages/Workflow/Design/nodes/components/BaseNode.tsx
View File

@ -60,6 +60,9 @@ const BaseNode: React.FC<NodeProps> = ({ data, selected }) => {
return null;
}
// 获取必填字段列表
const requiredFields = Array.isArray(schema.required) ? schema.required : [];
const allInputs = Object.keys(schema.properties)
.map(key => {
const fieldSchema = schema.properties![key];
@ -86,11 +89,15 @@ const BaseNode: React.FC<NodeProps> = ({ data, selected }) => {
!(Array.isArray(fieldValue) && fieldValue.length === 0) &&
(typeof fieldValue !== 'number' || !isNaN(fieldValue));
// 检查是否为必填字段
const isRequired = requiredFields.includes(key);
return {
key,
title: fieldSchema.title || key,
description: fieldSchema.description,
isFilled,
isRequired,
};
})
.filter((input): input is NonNullable<typeof input> => input !== null); // 过滤掉条件不满足的字段
@ -105,21 +112,45 @@ const BaseNode: React.FC<NodeProps> = ({ data, selected }) => {
<div className="text-xs text-muted-foreground font-medium">输入</div>
{/* 输入字段标签 */}
<div className="flex flex-wrap gap-1.5">
{allInputs.map((input, index) => (
<span
key={index}
className={`
text-xs px-2 py-1 rounded-md font-medium inline-flex items-center
${input.isFilled
? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
}
`}
title={`${input.description}${input.isFilled ? ' ✓ 已填写' : ' ✗ 未填写'}`}
>
{input.title}
</span>
))}
{allInputs.map((input, index) => {
// 🎨 三色系统：
// 🟢 绿色：已填写
// 🔴 红色：必填但未填写
// ⚪ 灰色：非必填且未填写
let colorClass = '';
let statusIcon = '';
let statusText = '';
if (input.isFilled) {
// 已填写 → 绿色
colorClass = 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300';
statusIcon = '✓';
statusText = '已填写';
} else if (input.isRequired) {
// 必填但未填写 → 红色
colorClass = 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300';
statusIcon = '✗';
statusText = '必填，未填写';
} else {
// 非必填且未填写 → 灰色
colorClass = 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
statusIcon = '○';
statusText = '可选，未填写';
}
return (
<span
key={index}
className={`
text-xs px-2 py-1 rounded-md font-medium inline-flex items-center
${colorClass}
`}
title={`${input.description} ${statusIcon} ${statusText}`}
>
{input.title}
</span>
);
})}
</div>
</div>
);