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

2025-12-25 11:29:10 +08:00
parent d5a44d2862
commit 7fdaf4da3d
22 changed files with 2103 additions and 64 deletions
--- a/src/client/components/ShareModal.tsx
+++ b/src/client/components/ShareModal.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { useLanguage } from '../contexts/LanguageContext'
+import Toast from './Toast'
+import './ShareModal.css'
+
+interface ShareModalProps {
+  isOpen: boolean
+  onClose: () => void
+  shareUrl: string
+}
+
+export default function ShareModal({ isOpen, onClose, shareUrl }: ShareModalProps) {
+  const { t } = useLanguage()
+  const [showToast, setShowToast] = useState(false)
+
+  if (!isOpen) return null
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(shareUrl)
+    setShowToast(true)
+  }
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose}>&times;</button>
+
+        <div className="modal-header">
+          <div className="modal-icon">🎉</div>
+          <h2 className="modal-title">{t('测试完成', 'Test Completed')}</h2>
+          <p className="modal-subtitle">
+            {t('您的网络延迟测试已完成，分享此链接给他人查看结果。', 'Your network latency test is complete. Share this link to show results.')}
+          </p>
+        </div>
+
+        <div className="modal-body">
+          <div className="share-box">
+            <input
+              type="text"
+              value={shareUrl}
+              readOnly
+              className="share-input"
+              onClick={handleCopy}
+            />
+            <button className="copy-btn" onClick={handleCopy}>
+              {t('复制', 'Copy')}
+            </button>
+          </div>
+
+          <div className="warning-box">
+            <span className="warning-icon">⚠️</span>
+            <p className="warning-text">
+              {t('结果链接随时可能失效，请根据需要保存测试结果。', 'Result link may expire at any time. Please save your test results as needed.')}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Toast
+        message={t('已复制到剪贴板!', 'Copied to clipboard!')}
+        isVisible={showToast}
+        onClose={() => setShowToast(false)}
+      />
+    </div>
+  )
+}