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