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:
1 parent
dfc5041a67
commit
58c23591a5
4 files changed
+1344
-253
No files matched your search
File diff suppressed because it is too large.
Load diff
+250
-250
File diff suppressed because it is too large.
Load diff
@@ -646,16 +646,33 @@ function FieldControl({
|
|||||||
<label className="checkbox-row">
|
<label className="checkbox-row">
|
||||||
<input type="checkbox" checked={boolOf(raw)} onChange={(event) => onChange(field.key, event.target.checked)} />
|
<input type="checkbox" checked={boolOf(raw)} onChange={(event) => onChange(field.key, event.target.checked)} />
|
||||||
{field.label}
|
{field.label}
|
||||||
{field.required && <span className="required">*</span>}
|
{field.required && <span className="required">必填</span>}
|
||||||
</label>
|
</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 (
|
return (
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label className="field-label">
|
<label className="field-label">
|
||||||
{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>}
|
{field.unit && <span className="field-hint">({field.unit})</span>}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
@@ -761,7 +778,7 @@ function FieldControl({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{field.description && <span className="field-hint">{field.description}</span>}
|
{hint && <span className="field-hint field-desc">{hint}</span>}
|
||||||
{field.valueTypes?.length > 0 && (
|
{field.valueTypes?.length > 0 && (
|
||||||
<span className="field-hint mono">{field.valueTypes.join(" · ")}</span>
|
<span className="field-hint mono">{field.valueTypes.join(" · ")}</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1182,7 +1182,13 @@ textarea:focus-visible {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.field-label .required {
|
.field-label .required {
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(220, 38, 38, 0.08);
|
||||||
color: var(--danger);
|
color: var(--danger);
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-hint {
|
.field-hint {
|
||||||
@@ -1191,6 +1197,14 @@ textarea:focus-visible {
|
|||||||
line-height: 13px;
|
line-height: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 字段说明文案: 比一般 hint 更醒目易读 */
|
||||||
|
.field-desc {
|
||||||
|
margin-top: 3px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.text-input,
|
.text-input,
|
||||||
.select-input,
|
.select-input,
|
||||||
.textarea-input {
|
.textarea-input {
|
||||||
|
|||||||
Reference in new issue
Block a user