fix

src/components/PropSidebar.tsx

@@ -188,9 +188,9 @@ interface PropSidebarProps {
 
 const MOBILE_PROP_MODULES: { id: MobilePropModule; label: string; icon: React.ReactNode }[] = [
   { id: 'properties', label: '属性', icon: <Sliders className="w-4 h-4" /> },
-  { id: 'nudge', label: '微调', icon: <Move className="w-4 h-4" /> },
   { id: 'content', label: '内容', icon: <Link2 className="w-4 h-4" /> },
   { id: 'layers', label: '图层', icon: <Layers className="w-4 h-4" /> },
+  { id: 'nudge', label: '微调', icon: <Move className="w-4 h-4" /> },
 ];
 
 export const PropSidebar: React.FC<PropSidebarProps> = ({
@@ -246,27 +246,6 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
 
   const templateVariables = useMemo(() => extractTemplateVariables(template), [template]);
 
-  const addableVisibilityVariables = useMemo(() => {
-    if (!selectedElem || !isConditionalVisibility(selectedElem)) return [];
-    const rules = resolveVisibilityRules(selectedElem);
-    return templateVariables.filter(
-      (v) => !rules.some((r) => r.target !== 'content' && r.variable === v)
-    );
-  }, [selectedElem, templateVariables]);
-
-  const visibilityRuleDialogVariableOptions = useMemo(() => {
-    if (!selectedElem || !visibilityRuleDialog) return [];
-    const rules = resolveVisibilityRules(selectedElem);
-    if (visibilityRuleDialog.mode === 'add') {
-      return addableVisibilityVariables;
-    }
-    const usedByOthers = rules
-      .filter((_, i) => i !== visibilityRuleDialog.index)
-      .filter((r) => r.target !== 'content')
-      .map((r) => r.variable);
-    return templateVariables.filter((v) => !usedByOthers.includes(v));
-  }, [selectedElem, visibilityRuleDialog, addableVisibilityVariables, templateVariables]);
-
   const editingVisibilityRule = useMemo(() => {
     if (!selectedElem || visibilityRuleDialog?.mode !== 'edit') return undefined;
     return resolveVisibilityRules(selectedElem)[visibilityRuleDialog.index];
@@ -2314,7 +2293,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
       open={visibilityRuleDialog !== null}
       mode={visibilityRuleDialog?.mode ?? 'add'}
       initialRule={editingVisibilityRule}
-      variableOptions={visibilityRuleDialogVariableOptions}
+      variableOptions={templateVariables}
       onClose={() => setVisibilityRuleDialog(null)}
       onConfirm={handleConfirmVisibilityRule}
     />

src/components/VariableFilterRulesEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { Plus } from 'lucide-react';
 import type { VisibilityRule } from '../types';
 import { resolveVariableFilterRules, toggleVisibilityRuleEnabled } from '../utils';
@@ -32,17 +32,6 @@ export const VariableFilterRulesEditor: React.FC<VariableFilterRulesEditorProps>
 
   const normalizedRules = resolveVariableFilterRules(rules);
 
-  const ruleDialogVariableOptions = useMemo(() => {
-    if (!ruleDialog) return templateVariables;
-    if (ruleDialog.mode === 'add') {
-      return templateVariables.filter((name) => !normalizedRules.some((rule) => rule.variable === name));
-    }
-    const usedByOthers = normalizedRules
-      .filter((_, index) => index !== ruleDialog.index)
-      .map((rule) => rule.variable);
-    return templateVariables.filter((name) => !usedByOthers.includes(name));
-  }, [ruleDialog, normalizedRules, templateVariables]);
-
   const editingRule =
     ruleDialog?.mode === 'edit' && ruleDialog.index !== undefined
       ? normalizedRules[ruleDialog.index]
@@ -97,7 +86,7 @@ export const VariableFilterRulesEditor: React.FC<VariableFilterRulesEditorProps>
         open={ruleDialog !== null}
         mode={ruleDialog?.mode ?? 'add'}
         initialRule={editingRule}
-        variableOptions={ruleDialogVariableOptions}
+        variableOptions={templateVariables}
         variableOnly
         addTitle={addTitle}
         editTitle={editTitle}

src/components/VisibilityRuleForm.tsx

@@ -108,7 +108,17 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
       </div>
       {visibilityOperatorNeedsValue(rule.operator) && (
         <div>
+          <div className="flex items-center justify-between gap-2">
             <label className="ps-field-label">目标值</label>
+            <button
+              type="button"
+              disabled={!rule.value}
+              onClick={() => onChange({ value: '' })}
+              className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline shrink-0"
+            >
+              清空
+            </button>
+          </div>
           <input
             type="text"
             value={rule.value ?? ''}