fix: change AuditPanel LLM fields grid layout to responsive stacked on mobile
This commit is contained in:
@@ -125,7 +125,7 @@ export default function AuditPanel() {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium">Provedor</label>
|
||||
<Select value={config.provider} onValueChange={handleProviderChange}>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { useWindStore } from '@/store/appStore';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { PermeabilityCase } from '@/lib/internal-pressure';
|
||||
|
||||
export const CpiSettingsCard: React.FC = () => {
|
||||
const {
|
||||
permeabilityCase,
|
||||
cpiRatio,
|
||||
cpi,
|
||||
setPermeabilityCase,
|
||||
setCpiRatio,
|
||||
} = useWindStore();
|
||||
|
||||
return (
|
||||
<Card className="shadow-sm border-border">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Pressão Interna (Cpi)</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Coeficiente de pressão interna (sec. 6.3)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-foreground">Caso de Permeabilidade</label>
|
||||
<Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}>
|
||||
<SelectTrigger className="w-full text-xs h-8">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem>
|
||||
<SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem>
|
||||
<SelectItem value="dominant-windward">Abertura dominante — barlavento</SelectItem>
|
||||
<SelectItem value="dominant-leeward">Abertura dominante — sotavento</SelectItem>
|
||||
<SelectItem value="dominant-lateral">Abertura dominante — lateral</SelectItem>
|
||||
<SelectItem value="airtight">Edificação estanque</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-xs font-medium text-foreground">Razão de áreas</label>
|
||||
<span className="text-xs text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
|
||||
</div>
|
||||
<Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" />
|
||||
<p className="text-[10px] leading-tight text-muted-foreground">
|
||||
Razão entre a área da abertura dominante e a área total das demais aberturas.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-md border bg-muted/40 p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-medium">Cpi calculado:</span>
|
||||
<Badge variant="default" className="font-mono text-sm">{cpi.toFixed(2)}</Badge>
|
||||
</div>
|
||||
<p className="text-[10px] leading-tight text-muted-foreground mt-1">
|
||||
Limitado a ±0,9 conforme norma. A pressão final é p = q · (Cpe − Cpi).
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@@ -3,6 +3,7 @@ import Warehouse3DViewer from '../components/Warehouse3D';
|
||||
import LinearLoadsTable from '../components/LinearLoadsTable';
|
||||
import SceneCapturePanel from '../components/SceneCapturePanel';
|
||||
import FtoolExportCard from '../components/FtoolExportCard';
|
||||
import { CpiSettingsCard } from '../components/CpiSettingsCard';
|
||||
import { useGalpaoStore } from '../store/galpaoStore';
|
||||
import { useWindStore } from '../store/appStore';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
@@ -88,6 +89,8 @@ const GalpaoModule: React.FC = () => {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<CpiSettingsCard />
|
||||
</div>
|
||||
|
||||
{/* Coluna Direita: Viewer 3D */}
|
||||
|
||||
Reference in New Issue
Block a user