84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Pencil, Trash2 } from 'lucide-react';
|
|
import { VisibilityRule } from '../types';
|
|
import { formatVisibilityRuleDescription, isVisibilityRuleEnabled } from '../utils';
|
|
|
|
interface VisibilityRuleSummaryProps {
|
|
rule: VisibilityRule;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
onToggleEnabled?: () => void;
|
|
}
|
|
|
|
/** 将 {变量} 或「内容值」高亮展示 */
|
|
function renderRuleDescription(rule: VisibilityRule) {
|
|
const text = formatVisibilityRuleDescription(rule);
|
|
if (rule.target === 'content') {
|
|
const parts = text.split('内容值');
|
|
if (parts.length === 1) return text;
|
|
return parts.flatMap((part, i) =>
|
|
i === 0
|
|
? [<span key={`${i}-t`}>{part}</span>, <span key={`${i}-c`} className="var-token">内容值</span>]
|
|
: [<span key={`${i}-t`}>{part}</span>]
|
|
);
|
|
}
|
|
const parts = text.split(/(\{[^}]+\})/g);
|
|
return parts.map((part, i) =>
|
|
part.startsWith('{') && part.endsWith('}') ? (
|
|
<span key={i} className="var-token">
|
|
{part}
|
|
</span>
|
|
) : (
|
|
<span key={i}>{part}</span>
|
|
)
|
|
);
|
|
}
|
|
|
|
export const VisibilityRuleSummary: React.FC<VisibilityRuleSummaryProps> = ({
|
|
rule,
|
|
onEdit,
|
|
onDelete,
|
|
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>
|
|
);
|
|
};
|