OpenFlare/frontend/app/(main)/waf/rules/editor/components/rule-node.tsx

import { Handle, Position, type NodeProps } from '@xyflow/react';
import {
  Ban,
  Fingerprint,
  Flag,
  Globe2,
  Play,
  ShieldCheck,
} from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import type { WAFRuleNode } from '@/lib/services/openflare';

export interface RuleFlowNodeData extends Record<string, unknown> {
  rule: WAFRuleNode;
  issues: number;
}

const meta = {
  start: { label: '开始', icon: Play },
  ip_match: { label: 'IP 匹配', icon: Fingerprint },
  geo_match: { label: '地域匹配', icon: Globe2 },
  pow: { label: 'PoW 挑战', icon: ShieldCheck },
  allow: { label: '通过', icon: Flag },
  block: { label: '阻止', icon: Ban },
} as const;

const outputHandles: Partial<Record<WAFRuleNode['type'], string[]>> = {
  start: ['next'],
  ip_match: ['true', 'false'],
  geo_match: ['true', 'false'],
  pow: ['next'],
};

export function RuleNode({ data, selected }: NodeProps) {
  const value = data as RuleFlowNodeData;
  const { rule, issues } = value;
  const { label, icon: Icon } = meta[rule.type];
  return (
    <div
      className={cn(
        'min-w-44 rounded-lg border bg-card shadow-sm transition-shadow',
        selected && 'ring-2 ring-ring',
        issues > 0 && 'border-destructive',
      )}
    >
      {rule.type !== 'start' && (
        <Handle type='target' position={Position.Left} />
      )}
      <div className='flex items-center gap-3 px-4 py-3'>
        <Icon className='size-5 text-primary' />
        <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
          <span className='text-sm font-medium'>{label}</span>
          <span className='font-mono text-[10px] text-muted-foreground'>
            {rule.id}
          </span>
        </div>
        {issues > 0 && <Badge variant='destructive'>{issues}</Badge>}
      </div>
      {(outputHandles[rule.type] ?? []).map((handle, index, all) => (
        <Handle
          key={handle}
          id={handle}
          type='source'
          position={Position.Right}
          style={{ top: `${((index + 1) / (all.length + 1)) * 100}%` }}
        >
          <span className='absolute right-3 -translate-y-1/2 text-[9px] text-muted-foreground'>
            {handle}
          </span>
        </Handle>
      ))}
    </div>
  );
}