frontend/src/components/console/ConsolePage.tsx

import React from 'react';
import { cn } from '@/lib/utils';

/**
 * 控制台页面容器组件
 * 提供统一的页面布局基础
 */

interface ConsolePageProps {
  /** 页面标题 */
  title?: string;
  /** 标题右侧的操作区 */
  titleAction?: React.ReactNode;
  /** 页面内容 */
  children: React.ReactNode;
  /** 额外的 className */
  className?: string;
  /** 内容区的 className */
  contentClassName?: string;
}

/**
 * 控制台页面容器
 * 提供统一的页面布局和间距
 */
export function ConsolePage({
  title,
  titleAction,
  children,
  className,
  contentClassName,
}: ConsolePageProps) {
  return (
    <div className={cn('min-h-screen bg-console-surface-base', className)}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* 页面标题行 */}
        {(title || titleAction) && (
          <div className="flex items-center justify-between mb-6">
            {title && (
              <h1 className="text-lg font-semibold text-console-text-primary">
                {title}
              </h1>
            )}
            {titleAction && (
              <div className="flex items-center gap-2">
                {titleAction}
              </div>
            )}
          </div>
        )}

        {/* 页面内容 */}
        <div className={contentClassName}>
          {children}
        </div>
      </div>
    </div>
  );
}