导出

src/components/VisibilityRuleSummary.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Pencil, Trash2 } from 'lucide-react';
 import { VisibilityRule } from '../types';
-import { formatVisibilityRuleDescription } from '../utils';
+import { formatVisibilityRuleDescription, isVisibilityRuleEnabled } from '../utils';
 
 interface VisibilityRuleSummaryProps {
   rule: VisibilityRule;
   onEdit: () => void;
   onDelete: () => void;
+  onToggleEnabled?: () => void;
 }
 
 /** 将 {变量} 或「内容值」高亮展示 */
@@ -37,31 +38,46 @@ export const VisibilityRuleSummary: React.FC<VisibilityRuleSummaryProps> = ({
   rule,
   onEdit,
   onDelete,
-}) => (
-  <div className="visibility-rule-summary">
-    <button
-      type="button"
-      onClick={onEdit}
-      className="visibility-rule-summary-btn"
-      title="编辑条件"
-    >
-      <p className="visibility-rule-summary-text">{renderRuleDescription(rule)}</p>
-    </button>
-    <button
-      type="button"
-      onClick={onEdit}
-      title="编辑"
-      className="shrink-0 p-1 rounded text-[#666] hover:text-[#31a8ff] hover:bg-[#333] transition-colors"
-    >
-      <Pencil className="w-3 h-3" />
-    </button>
-    <button
-      type="button"
-      onClick={onDelete}
-      title="删除条件"
-      className="shrink-0 p-1 rounded text-[#666] hover:text-red-400 hover:bg-[#3a2020] transition-colors"
-    >
-      <Trash2 className="w-3.5 h-3.5" />
-    </button>
-  </div>
-);
+  onToggleEnabled,
+}) => {
+  const enabled = isVisibilityRuleEnabled(rule);
+
+  return (
+    <div className={`visibility-rule-summary${enabled ? '' : ' is-disabled'}`}>
+      {onToggleEnabled && (
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={onToggleEnabled}
+          className="ps-checkbox shrink-0"
+          title={enabled ? '禁用条件' : '启用条件'}
+          aria-label={enabled ? '禁用条件' : '启用条件'}
+        />
+      )}
+      <button
+        type="button"
+        onClick={onEdit}
+        className="visibility-rule-summary-btn"
+        title="编辑条件"
+      >
+        <p className="visibility-rule-summary-text">{renderRuleDescription(rule)}</p>
+      </button>
+      <button
+        type="button"
+        onClick={onEdit}
+        title="编辑"
+        className="shrink-0 p-1 rounded text-[#666] hover:text-[#31a8ff] hover:bg-[#333] transition-colors"
+      >
+        <Pencil className="w-3 h-3" />
+      </button>
+      <button
+        type="button"
+        onClick={onDelete}
+        title="删除条件"
+        className="shrink-0 p-1 rounded text-[#666] hover:text-red-400 hover:bg-[#3a2020] transition-colors"
+      >
+        <Trash2 className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
+};