完美的

src/components/VisibilityRuleForm.tsx

@@ -3,13 +3,16 @@ import {
   VisibilityRule,
   VisibilityOperator,
   VisibilityRuleTarget,
+  ValueExtractConfig,
   VISIBILITY_OPERATOR_LABELS,
   VISIBILITY_RULE_TARGET_LABELS,
 } from '../types';
-import { visibilityOperatorNeedsValue } from '../utils';
+import { visibilityOperatorNeedsValue, valueExtractConfigHasExtract } from '../utils';
 import { FieldSelect } from './PsSelect';
+import { ValueExtractFields } from './ValueExtractFields';
+import { TextDisplayAffixFields } from './TextDisplayAffixFields';
 
-export interface VisibilityRuleDraft {
+export interface VisibilityRuleDraft extends ValueExtractConfig {
   target: VisibilityRuleTarget;
   variable: string;
   operator: VisibilityOperator;
@@ -31,6 +34,7 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
   variableOnly = false,
 }) => {
   const target = variableOnly ? 'variable' : (rule.target ?? 'variable');
+  const hasExtract = valueExtractConfigHasExtract(rule);
 
   return (
     <div className="space-y-3">
@@ -81,11 +85,48 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
         </div>
       ) : (
         !variableOnly && (
-        <p className="text-[9px] text-[#666] leading-relaxed">
-          使用本元素绑定内容解析并提取后的显示文本（含数值格式等；不含前缀/后缀字符）
-        </p>
+          <p className="text-[9px] text-[#666] leading-relaxed">
+            使用本元素绑定内容的变量替换与数值格式化结果（不含元素自身的值提取与显示前后缀）
+          </p>
         )
       )}
+      <div className="pt-2 border-t border-[#3a3a3a] space-y-2">
+        <div className="text-[10px] font-bold text-[#31a8ff]">值提取</div>
+        <ValueExtractFields config={rule} onChange={onChange} />
+        {hasExtract && rule.textExtractInverse && (
+          <TextDisplayAffixFields
+            elem={{
+              id: '',
+              type: 'text',
+              name: '',
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+              content: '',
+              fontSize: 10,
+              textAlign: 'left',
+              fontWeight: 'normal',
+              barcodeFormat: 'CODE128',
+              showText: true,
+              fontFamily: 'sans',
+              textDisplayPrefix: rule.textDisplayPrefix,
+              textDisplaySuffix: rule.textDisplaySuffix,
+            }}
+            onChange={(patch) =>
+              onChange({
+                textDisplayPrefix: patch.textDisplayPrefix,
+                textDisplaySuffix: patch.textDisplaySuffix,
+              })
+            }
+          />
+        )}
+        {hasExtract && !rule.textExtractInverse && (
+          <p className="text-[9px] text-[#666] leading-relaxed">
+            条件判断前先对{target === 'content' ? '内容值' : '变量值'}做提取，再与目标值比较
+          </p>
+        )}
+      </div>
       <div>
         <label className="ps-field-label">条件</label>
         <FieldSelect