feat(record): 增加测试结果保存和展示功能

src/client/components/IpInfoCard.tsx

@@ -0,0 +1,62 @@
+import { IpInfo } from '@shared/types'
+import { useLanguage } from '../contexts/LanguageContext'
+import './IpInfoCard.css'
+
+interface IpInfoCardProps {
+  info: IpInfo
+  className?: string
+  compact?: boolean
+}
+
+export default function IpInfoCard({ info, className = '', compact = false }: IpInfoCardProps) {
+  const { t } = useLanguage()
+
+  const asnDisplay = info.asn ? `AS${info.asn}` : '-'
+
+  if (compact) {
+    return (
+      <div className={`ip-info-card compact ${className}`}>
+        <div className="ip-compact-row">
+          <span className="ip-label">IP</span>
+          <span className="ip-value">{info.ip}</span>
+          <span className="ip-location">{info.city && `${info.city}, `}{info.country || '-'}</span>
+        </div>
+        <div className="ip-compact-row">
+          <span className="ip-org">{info.org || info.isp || '-'}</span>
+          <span className="ip-asn">{asnDisplay}</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`ip-info-card ${className}`}>
+      <div className="ip-main-info">
+        <div className="ip-address-row">
+          <span className="ip-label">IP</span>
+          <span className="ip-value">{info.ip}</span>
+        </div>
+        <div className="ip-location-row">
+          <span className="location-text">
+            {info.city && `${info.city}, `}{info.country || '-'}
+          </span>
+        </div>
+      </div>
+
+      <div className="ip-details-grid">
+        <div className="ip-detail-item">
+          <span className="detail-label">ISP</span>
+          <span className="detail-value">{info.isp || '-'}</span>
+        </div>
+        <div className="ip-detail-item">
+          <span className="detail-label">ASN</span>
+          <span className="detail-value">{asnDisplay}</span>
+        </div>
+        <div className="ip-detail-item full-width">
+          <span className="detail-label">{t('组织', 'Organization')}</span>
+          <span className="detail-value">{info.org || '-'}</span>
+        </div>
+      </div>
+    </div>
+  )
+}