NapCatQQ/packages/napcat-webui-frontend/src/components/display_card/container.tsx

import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
import { useLocalStorage } from '@uidotdev/usehooks';
import clsx from 'clsx';
import key from '@/const/key';

export interface ContainerProps {
  title: React.ReactNode;
  tag?: React.ReactNode;
  action: React.ReactNode;
  enableSwitch: React.ReactNode;
  children: React.ReactNode;
  className?: string; // Add className prop
}

export interface DisplayCardProps {
  showType?: boolean;
  onEdit: () => void;
  onEnable: () => Promise<void>;
  onDelete: () => Promise<void>;
  onEnableDebug: () => Promise<void>;
}

const DisplayCardContainer: React.FC<ContainerProps> = ({
  title: _title,
  tag,
  action,
  enableSwitch,
  children,
  className,
}) => {
  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
  const hasBackground = !!backgroundImage;

  return (
    <Card className={clsx(
      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm rounded-2xl overflow-hidden transition-all',
      hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40',
      className
    )}
    >
      <CardHeader className='p-4 pb-2 flex items-center justify-between gap-3'>
        <div className='flex-1 min-w-0 mr-2'>
          {/* 限制标题区域最大宽度并隐藏溢出，确保 long title 能正确截断显示省略号 */}
          <div className='inline-flex items-center px-3 py-1 rounded-lg bg-default-100/50 dark:bg-white/10 border border-transparent dark:border-white/5 max-w-full overflow-hidden'>
            <span className='block font-bold text-default-600 dark:text-white/90 text-sm truncate select-text whitespace-nowrap'>
              {_title}
            </span>
          </div>
        </div>
        {tag && <div className='flex-shrink-0'>{tag}</div>}
        {enableSwitch && <div className='flex-shrink-0'>{enableSwitch}</div>}
      </CardHeader>
      <CardBody className='px-4 py-2 text-sm text-default-600'>{children}</CardBody>
      <CardFooter className='px-4 pb-4 pt-2'>{action}</CardFooter>
    </Card>
  );
};

export default DisplayCardContainer;