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>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<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">
|
<div className="space-y-1.5">
|
||||||
<label className="text-sm font-medium">Provedor</label>
|
<label className="text-sm font-medium">Provedor</label>
|
||||||
<Select value={config.provider} onValueChange={handleProviderChange}>
|
<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 LinearLoadsTable from '../components/LinearLoadsTable';
|
||||||
import SceneCapturePanel from '../components/SceneCapturePanel';
|
import SceneCapturePanel from '../components/SceneCapturePanel';
|
||||||
import FtoolExportCard from '../components/FtoolExportCard';
|
import FtoolExportCard from '../components/FtoolExportCard';
|
||||||
|
import { CpiSettingsCard } from '../components/CpiSettingsCard';
|
||||||
import { useGalpaoStore } from '../store/galpaoStore';
|
import { useGalpaoStore } from '../store/galpaoStore';
|
||||||
import { useWindStore } from '../store/appStore';
|
import { useWindStore } from '../store/appStore';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
@@ -88,6 +89,8 @@ const GalpaoModule: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<CpiSettingsCard />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Coluna Direita: Viewer 3D */}
|
{/* Coluna Direita: Viewer 3D */}
|
||||||
|
|||||||
Reference in New Issue
Block a user