79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
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 } }));
|
|
}
|