完美

src/components/PropSidebar.tsx

@@ -10,6 +10,8 @@ import {
 } from '../utils';
 import { VisibilityRuleDialog } from './VisibilityRuleDialog';
 import { VisibilityRuleSummary } from './VisibilityRuleSummary';
+import { ValueExtractFields } from './ValueExtractFields';
+import { TextDisplayAffixFields } from './TextDisplayAffixFields';
 import {
   alignToSelectionBounds,
   alignSelectionToCanvas,
@@ -226,7 +228,9 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
   const addableVisibilityVariables = useMemo(() => {
     if (!selectedElem || !isConditionalVisibility(selectedElem)) return [];
     const rules = resolveVisibilityRules(selectedElem);
-    return templateVariables.filter((v) => !rules.some((r) => r.variable === v));
+    return templateVariables.filter(
+      (v) => !rules.some((r) => r.target !== 'content' && r.variable === v)
+    );
   }, [selectedElem, templateVariables]);
 
   const visibilityRuleDialogVariableOptions = useMemo(() => {
@@ -237,6 +241,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
     }
     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]);
@@ -661,6 +666,17 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
             </div>
           </div>
         )}
+        {(selectedElem.type === 'text' ||
+          selectedElem.type === 'barcode' ||
+          selectedElem.type === 'qrcode' ||
+          selectedElem.type === 'image') && (
+          <div className="pt-2 border-t border-[#3a3a3a]">
+            <ValueExtractFields elem={selectedElem} onChange={handleElemChange} />
+            {selectedElem.type === 'text' && (
+              <TextDisplayAffixFields elem={selectedElem} onChange={handleElemChange} />
+            )}
+          </div>
+        )}
         {renderVariableManagementBlock()}
         <div className="space-y-2 pt-2 border-t border-[#3a3a3a] min-w-0 max-w-full overflow-hidden">
           <div className="text-[10px] font-bold text-[#31a8ff]">显示控制</div>
@@ -723,7 +739,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   <div className="space-y-1.5">
                     {rules.map((rule, index) => (
                       <VisibilityRuleSummary
-                        key={`${rule.variable}-${index}`}
+                        key={`${rule.target ?? 'variable'}-${rule.variable || 'content'}-${index}`}
                         rule={rule}
                         onEdit={() => setVisibilityRuleDialog({ mode: 'edit', index })}
                         onDelete={() => removeRule(index)}
@@ -736,13 +752,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                 <button
                   type="button"
                   onClick={() => setVisibilityRuleDialog({ mode: 'add' })}
-                  disabled={addableVisibilityVariables.length === 0}
-                  className="ps-btn w-full text-[10px] justify-center disabled:opacity-40"
-                  title={
-                    addableVisibilityVariables.length === 0
-                      ? '请先在变量管理中添加变量，或所有变量已添加条件'
-                      : undefined
-                  }
+                  className="ps-btn w-full text-[10px] justify-center"
                 >
                   <Plus className="w-3 h-3" />
                   添加条件