mula
/
cosmo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve FocusInfo layout alignment and terminal modal text color

main
mula.liu 2025-11-30 23:44:54 +08:00
parent fc81a4d8dc
commit a91dc00b13
1 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/FocusInfo.tsx
View File

@ -65,6 +65,9 @@ export function FocusInfo({ body, onClose }: FocusInfoProps) {
.terminal-modal .ant-modal-close:hover {
background-color: rgba(35, 134, 54, 0.2) !important;
}
.terminal-modal .ant-modal-body .animate-in {
color: #2ea043 !important; /* Ensure content text is green */
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
@ -113,44 +116,48 @@ export function FocusInfo({ body, onClose }: FocusInfoProps) {
</div>
</div>
{/* Stats Grid */}
{/* Stats and Actions Grid */}
<div className="grid grid-cols-2 gap-2 mb-2">
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
<div className="p-1.5 rounded-full bg-blue-500/20 text-blue-400">
<Ruler size={14} />
</div>
<div>
<div className="text-[9px] text-gray-500 uppercase">日心距离</div>
<div className="text-xs font-mono text-gray-200">{distance} AU</div>
</div>
</div>
{isProbe && (
{/* Column 1: Heliocentric Distance Card */}
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
<div className={`p-1.5 rounded-full ${isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
<Activity size={14} />
</div>
<div>
<div className="text-[9px] text-gray-500 uppercase">状态</div>
<div className={`text-xs font-medium ${isActive ? 'text-green-300' : 'text-red-300'}`}>
{isActive ? '运行中' : '已失效'}
<div className="p-1.5 rounded-full bg-blue-500/20 text-blue-400">
<Ruler size={14} />
</div>
<div>
<div className="text-[9px] text-gray-500 uppercase">日心距离</div>
<div className="text-xs font-mono text-gray-200">{distance} AU</div>
</div>
</div>
</div>
)}
{/* Column 2: JPL Horizons Button */}
<div className="flex items-center justify-end">
<button
onClick={fetchNasaData}
className="px-3 py-1.5 rounded-lg bg-cyan-950/30 text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/10 hover:border-cyan-500/50 transition-all flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest group/btn w-full justify-end"
title="连接 JPL Horizons System"
>
<Radar size={12} className="group-hover/btn:animate-spin-slow" />
<span>JPL Horizons</span>
</button>
</div>
</div>
{/* Actions Row */}
<div className="flex justify-end">
<button
onClick={fetchNasaData}
className="px-3 py-1.5 rounded-lg bg-cyan-950/30 text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/10 hover:border-cyan-500/50 transition-all flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest group/btn"
title="连接 JPL Horizons System"
>
<Radar size={12} className="group-hover/btn:animate-spin-slow" />
<span>JPL Horizons</span>
</button>
</div>
{/* Conditional Probe Status Card (if isProbe is true, this goes in a new row) */}
{isProbe && (
<div className="grid grid-cols-1 mb-2">
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
<div className={`p-1.5 rounded-full ${isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
<Activity size={14} />
</div>
<div>
<div className="text-[9px] text-gray-500 uppercase">状态</div>
<div className={`text-xs font-medium ${isActive ? 'text-green-300' : 'text-red-300'}`}>
{isActive ? '运行中' : '已失效'}
</div>
</div>
</div>
</div>
)}
</div>
{/* Connecting Line/Triangle pointing down to the body */}