Mujoco_WASM/web_platform/src/app/components/LayoutSettingsDialog.tsx

import { Columns3, Focus, PanelLeft, PanelRight, RotateCcw } from 'lucide-react';
import { Button, Dialog } from '../../components/ui';
export type LayoutPreset = 'default' | 'viewport' | 'project' | 'control';
const presets = [
  { value: 'default' as const, label: '默认布局', detail: '左右面板均衡显示', icon: Columns3 },
  { value: 'viewport' as const, label: '宽视口', detail: '隐藏两侧面板', icon: Focus },
  { value: 'project' as const, label: '工程浏览', detail: '加宽工程面板', icon: PanelLeft },
  { value: 'control' as const, label: '控制调试', detail: '加宽控制面板', icon: PanelRight },
];
export function LayoutSettingsDialog({
  open,
  onClose,
  leftOpen,
  rightOpen,
  onLeftOpen,
  onRightOpen,
  onPreset,
  onReset,
}: {
  open: boolean;
  onClose: () => void;
  leftOpen: boolean;
  rightOpen: boolean;
  onLeftOpen: (value: boolean) => void;
  onRightOpen: (value: boolean) => void;
  onPreset: (preset: LayoutPreset) => void;
  onReset: () => void;
}) {
  return (
    <Dialog open={open} onClose={onClose} title="布局设置">
      <div className="flex gap-2">
        <Button
          variant={leftOpen ? 'primary' : 'secondary'}
          aria-pressed={leftOpen}
          onClick={() => onLeftOpen(!leftOpen)}
          icon={<PanelLeft className="h-3.5 w-3.5" />}
        >
          工程面板
        </Button>
        <Button
          variant={rightOpen ? 'primary' : 'secondary'}
          aria-pressed={rightOpen}
          onClick={() => onRightOpen(!rightOpen)}
          icon={<PanelRight className="h-3.5 w-3.5" />}
        >
          右侧面板
        </Button>
      </div>
      <h3 className="mb-2 mt-4 text-xs font-semibold">布局预设</h3>
      <div className="grid grid-cols-2 gap-2">
        {presets.map((item) => (
          <button
            key={item.value}
            onClick={() => onPreset(item.value)}
            className="flex gap-2 rounded-lg border border-border bg-surface p-3 text-left hover:border-accent hover:bg-accent-soft focus-visible:ring-2 focus-visible:ring-accent/30"
          >
            <item.icon className="h-4 w-4 shrink-0 text-accent" />
            <span>
              <span className="block text-xs font-medium">{item.label}</span>
              <span className="mt-0.5 block text-[10px] text-text-tertiary">{item.detail}</span>
            </span>
          </button>
        ))}
      </div>
      <Button
        className="mt-4 w-full"
        onClick={onReset}
        icon={<RotateCcw className="h-3.5 w-3.5" />}
      >
        恢复默认布局与宽度
      </Button>
    </Dialog>
  );
}
// eslint-disable-next-line react-refresh/only-export-components
export function dispatchLayoutWidths(left: number, right: number) {
  window.dispatchEvent(new CustomEvent('mujoco-layout-widths', { detail: { left, right } }));
}