tools/label-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完美

Browse Source
This commit is contained in:
iqudoo
2026-06-13 06:13:25 +08:00
parent a08fbd1eb6
commit f71ee2f861
8 changed files with 543 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/VisibilityRuleForm.tsx
View File

@@ -2,11 +2,14 @@ import React from 'react';
import {
VisibilityRule,
VisibilityOperator,
VisibilityRuleTarget,
VISIBILITY_OPERATOR_LABELS,
VISIBILITY_RULE_TARGET_LABELS,
} from '../types';
import { visibilityOperatorNeedsValue } from '../utils';
export interface VisibilityRuleDraft {
target: VisibilityRuleTarget;
variable: string;
operator: VisibilityOperator;
value?: string;
@@ -22,54 +25,89 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
rule,
onChange,
variableOptions,
}) => (
<div className="space-y-3">
<div>
<label className="ps-field-label">变量</label>
<select
value={rule.variable}
onChange={(e) => onChange({ variable: e.target.value })}
className="ps-field text-[11px] w-full mt-0.5"
>
{!rule.variable && <option value="">请选择变量</option>}
{variableOptions.map((v) => (
<option key={v} value={v}>
{v}
</option>
))}
</select>
</div>
<div>
<label className="ps-field-label">条件</label>
<select
value={rule.operator}
onChange={(e) => {
const operator = e.target.value as VisibilityOperator;
onChange({
operator,
value: visibilityOperatorNeedsValue(operator) ? rule.value : undefined,
});
}}
className="ps-field text-[11px] w-full mt-0.5"
>
{(Object.keys(VISIBILITY_OPERATOR_LABELS) as VisibilityOperator[]).map((op) => (
<option key={op} value={op}>
{VISIBILITY_OPERATOR_LABELS[op]}
</option>
))}
</select>
</div>
{visibilityOperatorNeedsValue(rule.operator) && (
}) => {
const target = rule.target ?? 'variable';
return (
<div className="space-y-3">
<div>
<label className="ps-field-label">目标值</label>
<input
type="text"
value={rule.value ?? ''}
onChange={(e) => onChange({ value: e.target.value })}
placeholder="比较目标值"
className="ps-field font-mono text-[11px] w-full mt-0.5"
/>
<label className="ps-field-label">条件对象</label>
<select
value={target}
onChange={(e) => {
const nextTarget = e.target.value as VisibilityRuleTarget;
onChange({
target: nextTarget,
variable: nextTarget === 'content' ? '' : rule.variable,
});
}}
className="ps-field text-[11px] w-full mt-0.5"
>
{(Object.keys(VISIBILITY_RULE_TARGET_LABELS) as VisibilityRuleTarget[]).map((t) => (
<option key={t} value={t}>
{VISIBILITY_RULE_TARGET_LABELS[t]}
</option>
))}
</select>
</div>
)}
</div>
);
{target === 'variable' ? (
<div>
<label className="ps-field-label">变量</label>
<select
value={rule.variable}
onChange={(e) => onChange({ variable: e.target.value })}
className="ps-field text-[11px] w-full mt-0.5"
>
{!rule.variable && <option value="">请选择变量</option>}
{variableOptions.map((v) => (
<option key={v} value={v}>
{v}
</option>
))}
</select>
{variableOptions.length === 0 && (
<p className="text-[9px] text-[#666] mt-1 leading-relaxed">
请先在「变量管理」中添加变量，或改用「内容值」作为条件对象
</p>
)}
</div>
) : (
<p className="text-[9px] text-[#666] leading-relaxed">
使用本元素绑定内容解析并提取后的显示文本（含数值格式等；不含前缀/后缀字符）
</p>
)}
<div>
<label className="ps-field-label">条件</label>
<select
value={rule.operator}
onChange={(e) => {
const operator = e.target.value as VisibilityOperator;
onChange({
operator,
value: visibilityOperatorNeedsValue(operator) ? rule.value : undefined,
});
}}
className="ps-field text-[11px] w-full mt-0.5"
>
{(Object.keys(VISIBILITY_OPERATOR_LABELS) as VisibilityOperator[]).map((op) => (
<option key={op} value={op}>
{VISIBILITY_OPERATOR_LABELS[op]}
</option>
))}
</select>
</div>
{visibilityOperatorNeedsValue(rule.operator) && (
<div>
<label className="ps-field-label">目标值</label>
<input
type="text"
value={rule.value ?? ''}
onChange={(e) => onChange({ value: e.target.value })}
placeholder="比较目标值"
className="ps-field font-mono text-[11px] w-full mt-0.5"
/>
</div>
)}
</div>
);
};