feat: 属性面板参数说明优化, 让用户清楚每个参数该填什么

- catalog-overrides 为 vision 组 88 个组件补充 229 个字段的 description/placeholder
  (目标/偏移量/图片路径/引擎选择等高频易混字段), catalog.json 同步应用
- Properties.tsx: 元数据缺描述时按控件类型兜底提示(element/file/folder/region)
  vision 组件 element 字段提示「填写屏幕上可见的目标文本, OCR 定位」
- 必填标识从红星 * 改为「必填」徽标, 更直白
- 字段说明文案样式增强(.field-desc): 10px muted 色置于输入框下方
This commit is contained in:
yu 2026-11-02 17:37:43 +08:00
parent dfc5041a67
commit 58c23591a5
4 changed files with 1344 additions and 253 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -646,16 +646,33 @@ function FieldControl({
<label className="checkbox-row">
<input type="checkbox" checked={boolOf(raw)} onChange={(event) => onChange(field.key, event.target.checked)} />
{field.label}
{field.required && <span className="required">*</span>}
{field.required && <span className="required">必填</span>}
</label>
);
}
// 元数据缺描述时的兜底提示, 按控件类型与组件类别给出「该填什么」的指引
const fallbackHint =
field.widget === "element"
? isVisionTarget
? "填写屏幕上可见的目标文本,运行时截屏后通过 OCR 定位"
: isGroundTarget
? "填写桌面元素,或点「桌面拾取」自动获取"
: "填写元素选择器,或点「浏览器拾取」从页面获取"
: field.widget === "file"
? "填写完整文件路径,或点右侧按钮选择"
: field.widget === "folder"
? "填写完整文件夹路径,或点右侧按钮选择"
: field.widget === "region"
? "填写区域坐标 JSON,或点「屏幕框选」生成"
: "";
const hint = field.description || fallbackHint;
return (
<div className="field">
<label className="field-label">
{field.label}
{field.required && <span className="required">*</span>}
{field.required && <span className="required">必填</span>}
{field.unit && <span className="field-hint">({field.unit})</span>}
</label>
@ -761,7 +778,7 @@ function FieldControl({
</div>
)}
{field.description && <span className="field-hint">{field.description}</span>}
{hint && <span className="field-hint field-desc">{hint}</span>}
{field.valueTypes?.length > 0 && (
<span className="field-hint mono">{field.valueTypes.join(" · ")}</span>
)}

View File

@ -1182,7 +1182,13 @@ textarea:focus-visible {
}
.field-label .required {
padding: 1px 5px;
border-radius: 5px;
background: rgba(220, 38, 38, 0.08);
color: var(--danger);
font-size: 9px;
font-weight: 600;
line-height: 12px;
}
.field-hint {
@ -1191,6 +1197,14 @@ textarea:focus-visible {
line-height: 13px;
}
/* 字段说明文案: 比一般 hint 更醒目易读 */
.field-desc {
margin-top: 3px;
color: var(--muted);
font-size: 10px;
line-height: 14px;
}
.text-input,
.select-input,
.textarea-input {