Merge pull request #24 from gujiangjiang/main

oiov · web-flow · commit 1ceae2e15860 · 2025-10-19T10:30:40.000+08:00
fix: 修复密码登录在邮箱清空后失效的问题
diff --git a/frontend/public/locales/de/common.json b/frontend/public/locales/de/common.json
@@ -57,5 +57,9 @@
   "Select all": "Alle auswählen",
   "Delete selected": "Ausgewählte löschen",
   "Please create a temporary email address first": "Bitte erstellen Sie zuerst eine temporäre E-Mail-Adresse",
-  "Email Detail": "E-Mail-Detail"
+  "Email Detail": "E-Mail-Detail",
+  "Expires in": "Läuft ab in",
+  "Email expired": "E-Mail abgelaufen",
+  "Reset validity": "Gültigkeit zurücksetzen",
+  "Validity reset successfully": "Gültigkeit erfolgreich zurückgesetzt"
 }
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -60,5 +60,9 @@
   "Select all": "Select all",
   "Delete selected": "Delete selected",
   "Please create a temporary email address first": "Please create a temporary email address first",
-  "Email Detail": "Email Detail"
+  "Email Detail": "Email Detail",
+  "Expires in": "Expires in",
+  "Email expired": "Email expired",
+  "Reset validity": "Reset validity", 
+  "Validity reset successfully": "Validity reset successfully"
 }
diff --git a/frontend/public/locales/fr/common.json b/frontend/public/locales/fr/common.json
@@ -56,5 +56,9 @@
   "Select all": "Tout sélectionner",
   "Delete selected": "Supprimer la sélection",
   "Please create a temporary email address first": "Veuillez d'abord créer une adresse e-mail temporaire",
-  "Email Detail": "Détail de l'e-mail"
+  "Email Detail": "Détail de l'e-mail",
+  "Expires in": "Expire dans",
+  "Email expired": "E-mail expiré",
+  "Reset validity": "Réinitialiser la validité",
+  "Validity reset successfully": "Validité réinitialisée avec succès"
 }
diff --git a/frontend/public/locales/hi/common.json b/frontend/public/locales/hi/common.json
@@ -56,5 +56,9 @@
   "Select all": "सभी का चयन करें",
   "Delete selected": "चयनित हटाएं",
   "Please create a temporary email address first": "कृपया पहले एक अस्थायी ईमेल पता बनाएं",
-  "Email Detail": "ईमेल विवरण"
+  "Email Detail": "ईमेल विवरण",
+  "Expires in": "में समाप्त होता है",
+  "Email expired": "ईमेल समाप्त हो गया है",
+  "Reset validity": "वैधता रीसेट करें",
+  "Validity reset successfully": "वैधता सफलतापूर्वक रीसेट की गई"
 }
diff --git a/frontend/public/locales/it/common.json b/frontend/public/locales/it/common.json
@@ -56,5 +56,9 @@
   "Select all": "Seleziona tutto",
   "Delete selected": "Elimina selezionati",
   "Please create a temporary email address first": "Per favore, crea prima un indirizzo email temporaneo",
-  "Email Detail": "Dettagli email"
+  "Email Detail": "Dettagli email",
+  "Expires in": "Scade tra",
+  "Email expired": "Email scaduta",
+  "Reset validity": "Reimposta validità",
+  "Validity reset successfully": "Validità reimpostata con successo"
 }
diff --git a/frontend/public/locales/ja/common.json b/frontend/public/locales/ja/common.json
@@ -56,5 +56,9 @@
   "Select all": "すべて選択",
   "Delete selected": "選択したものを削除",
   "Please create a temporary email address first": "最初に一時的なメールアドレスを作成してください",
-  "Email Detail": "メールの詳細"
+  "Email Detail": "メールの詳細",
+  "Expires in": "有効期限",
+  "Email expired": "メールの有効期限が切れました",
+  "Reset validity": "有効期限をリセット",
+  "Validity reset successfully": "有効期限が正常にリセットされました"
 }
diff --git a/frontend/public/locales/ko/common.json b/frontend/public/locales/ko/common.json
@@ -56,5 +56,9 @@
   "Select all": "모두 선택",
   "Delete selected": "선택 항목 삭제",
   "Please create a temporary email address first": "먼저 임시 이메일 주소를 만드세요",
-  "Email Detail": "이메일 세부 정보"
+  "Email Detail": "이메일 세부 정보",
+  "Expires in": "만료까지 남은 시간",
+  "Email expired": "이메일이 만료되었습니다",
+  "Reset validity": "유효 기간 재설정",
+  "Validity reset successfully": "유효 기간이 성공적으로 재설정되었습니다"
 }
diff --git a/frontend/public/locales/pt/common.json b/frontend/public/locales/pt/common.json
@@ -56,5 +56,9 @@
   "Select all": "Selecionar tudo",
   "Delete selected": "Excluir selecionados",
   "Please create a temporary email address first": "Por favor, crie um endereço de e-mail temporário primeiro",
-  "Email Detail": "Detalhes do email"
+  "Email Detail": "Detalhes do email",
+  "Expires in": "Expira em",
+  "Email expired": "E-mail expirado",
+  "Reset validity": "Redefinir validade",
+  "Validity reset successfully": "Validade redefinida com sucesso"
 }
diff --git a/frontend/public/locales/ru/common.json b/frontend/public/locales/ru/common.json
@@ -56,5 +56,9 @@
   "Select all": "Выбрать все",
   "Delete selected": "Удалить выбранные",
   "Please create a temporary email address first": "Пожалуйста, сначала создайте временный адрес электронной почты",
-  "Email Detail": "Детали письма"
+  "Email Detail": "Детали письма",
+  "Expires in": "Истекает через",
+  "Email expired": "Срок действия электронной почты истек",
+  "Reset validity": "Сбросить срок действия",
+  "Validity reset successfully": "Срок действия успешно сброшен"
 }
diff --git a/frontend/public/locales/tr/common.json b/frontend/public/locales/tr/common.json
@@ -56,5 +56,9 @@
   "Select all": "Tümünü seç",
   "Delete selected": "Seçilenleri sil",
   "Please create a temporary email address first": "Lütfen önce geçici bir e-posta adresi oluşturun",
-  "Email Detail": "E-posta Detayı"
+  "Email Detail": "E-posta Detayı",
+  "Expires in": "Şu tarihte sona eriyor:",
+  "Email expired": "E-posta süresi doldu",
+  "Reset validity": "Geçerliliği Sıfırla",
+  "Validity reset successfully": "Geçerlilik başarıyla sıfırlandı"
 }
diff --git a/frontend/public/locales/zh-TW/common.json b/frontend/public/locales/zh-TW/common.json
@@ -57,5 +57,9 @@
   "Select all": "全選",
   "Delete selected": "刪除選中",
   "Please create a temporary email address first": "請先創建一個臨時郵箱地址",
-  "Email Detail": "郵件詳情"
+  "Email Detail": "郵件詳情",
+  "Expires in": "有效期剩餘",
+  "Email expired": "郵箱已過期",
+  "Reset validity": "重設有效期",
+  "Validity reset successfully": "有效期重設成功"
 }
diff --git a/frontend/public/locales/zh/common.json b/frontend/public/locales/zh/common.json
@@ -60,5 +60,9 @@
   "Select all": "全选",
   "Delete selected": "删除选中",
   "Please create a temporary email address first": "请先创建一个临时邮箱地址",
-  "Email Detail": "邮件详情"
+  "Email Detail": "邮件详情",
+  "Expires in": "有效期剩余",
+  "Email expired": "邮箱已过期",
+  "Reset validity": "重置有效期",
+  "Validity reset successfully": "有效期重置成功"
 }
diff --git a/frontend/src/components/CountdownTimer.tsx b/frontend/src/components/CountdownTimer.tsx
@@ -0,0 +1,101 @@
+import { useState, useEffect, useCallback } from 'react'; // fix: 导入 useCallback
+import { useTranslation } from 'react-i18next';
+import ClockIcon from './icons/Clock'; // 导入时钟图标
+import RefreshIcon from './icons/RefreshIcon'; // 导入刷新图标
+
+// 定义组件的 props 类型
+interface CountdownTimerProps {
+  expiryTimestamp: number; // 过期时间戳 (毫秒)
+  onReset: () => void; // 修改：回调函数名称从 onExtend 改为 onReset
+}
+
+// 格式化时间单位，确保总是显示两位数
+const formatTimeUnit = (unit: number): string => {
+  return unit < 10 ? `0${unit}` : `${unit}`;
+};
+
+// 修改：组件名称和 prop 名称修改
+export function CountdownTimer({ expiryTimestamp, onReset }: CountdownTimerProps) {
+  const { t } = useTranslation(); // 用于国际化
+
+  // 计算剩余时间的函数 (使用 useCallback 避免不必要的重新创建)
+  const calculateTimeLeft = useCallback(() => {
+    // 直接使用最新的 expiryTimestamp prop
+    const difference = expiryTimestamp - Date.now();
+    let timeLeft = {
+      hours: '00',
+      minutes: '00',
+      seconds: '00',
+      expired: difference <= 0,
+    };
+
+    if (difference > 0) {
+      const totalSeconds = Math.floor(difference / 1000);
+      const seconds = totalSeconds % 60;
+      const totalMinutes = Math.floor(totalSeconds / 60);
+      const minutes = totalMinutes % 60;
+      const hours = Math.floor(totalMinutes / 60); // 不再限制 % 24，可以显示超过一天的时间
+
+      timeLeft = {
+        hours: formatTimeUnit(hours),
+        minutes: formatTimeUnit(minutes),
+        seconds: formatTimeUnit(seconds),
+        expired: false,
+      };
+    }
+
+    return timeLeft;
+  }, [expiryTimestamp]); // expiryTimestamp 作为依赖项
+
+  // 使用 useState 来存储剩余时间
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  // 使用 useEffect 来设置定时器，每秒更新剩余时间
+  useEffect(() => {
+    // 立即计算一次以避免初始延迟
+    setTimeLeft(calculateTimeLeft());
+
+    // 设置定时器
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    // 组件卸载或 expiryTimestamp 变化时清除定时器
+    // fix: 将 expiryTimestamp 添加到依赖项，确保每次时间戳更新时都重置定时器
+    return () => clearInterval(timer);
+  }, [expiryTimestamp, calculateTimeLeft]); // 依赖项包含 expiryTimestamp 和 calculateTimeLeft
+
+  // 当计算出的时间显示已过期时，停止计时器（通过清除上一个 effect 实现）
+  useEffect(() => {
+    if (timeLeft.expired) {
+      // 定时器已在上面的 effect 的 cleanup 函数中清除
+      // 这里可以额外处理过期逻辑，如果需要的话
+    }
+  }, [timeLeft.expired]);
+
+  return (
+    // feat: 将容器改为 flex-row 并添加按钮
+    <div className="flex items-center justify-between gap-2 text-sm text-cyan-400 my-4 p-3 bg-white/5 rounded-md border border-cyan-50/20 shadow-inner">
+      <div className="flex items-center gap-2"> {/* 将图标和文本包裹起来 */}
+        <ClockIcon className="w-5 h-5" />
+        {timeLeft.expired ? (
+          <span>{t('Email expired')}</span> // 邮箱已过期提示
+        ) : (
+          <span>
+            {t('Expires in')}: {timeLeft.hours}:{timeLeft.minutes}:{timeLeft.seconds}
+          </span> // 显示剩余时间 时:分:秒
+        )}
+      </div>
+      {/* feat: 添加重置有效期按钮, 仅在未过期时显示 */}
+      {!timeLeft.expired && (
+        <button
+          onClick={onReset} // 修改：调用 onReset 回调
+          className="p-1 rounded text-cyan-400 hover:text-cyan-300 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+          title={t('Reset validity')} // 修改：更新 tooltip 提示文字
+        >
+          <RefreshIcon className="w-5 h-5" /> {/* 使用刷新图标 */}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -30,6 +30,8 @@ import Info from "../components/icons/Info.tsx";
 import type { Email } from '../database_types.ts';
 import { InfoModal } from '../components/InfoModal.tsx';
 import { MailDetail } from './MailDetail.tsx';
+// feat: 导入倒计时组件
+import { CountdownTimer } from '../components/CountdownTimer.tsx';
 
 export function Home() {
   const config = useConfig();
@@ -38,6 +40,11 @@ export function Home() {
 
   // 状态管理
   const [address, setAddress] = useState<string | undefined>(() => Cookies.get('userMailbox'));
+  // feat: 新增状态，用于存储邮箱过期时间戳
+  const [expiryTimestamp, setExpiryTimestamp] = useState<number | undefined>(() => {
+      const expiry = Cookies.get('emailExpiry');
+      return expiry ? parseInt(expiry, 10) : undefined;
+  });
   const [turnstileToken, setTurnstileToken] = useState<string>('');
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [isTurnstileVerified, setIsTurnstileVerified] = useState(false);
@@ -85,7 +92,7 @@ export function Home() {
                     <Close className="h-5 w-5" />
                 </button>
             </div>
-            
+
             {/* 内容区域 */}
             <div>
                 <p className="text-sm text-gray-300">
@@ -128,12 +135,21 @@ export function Home() {
     // 当用户停止使用邮箱时（地址被清除），重置状态并关闭通知
     if (!address) {
       setHasReceivedEmail(false);
+      // feat: 清除过期时间戳状态
+      setExpiryTimestamp(undefined);
       toast.dismiss('password-notification');
+    } else {
+        // feat: 当地址存在时，尝试读取过期时间 cookie
+        const expiry = Cookies.get('emailExpiry');
+        if (expiry && !expiryTimestamp) {
+            setExpiryTimestamp(parseInt(expiry, 10));
+        }
     }
 
     prevEmailsLength.current = emails.length;
-  }, [emails, address, hasReceivedEmail]); // 依赖项包含 emails, address 和 hasReceivedEmail 以响应所有相关变化
-
+  // }, [emails, address, hasReceivedEmail]); // 依赖项包含 emails, address 和 hasReceivedEmail 以响应所有相关变化
+  // feat: 添加 expiryTimestamp 到依赖项
+  }, [emails, address, hasReceivedEmail, expiryTimestamp]);
 
   // 创建新邮箱地址的处理函数
   const handleCreateAddress = async () => {
@@ -146,8 +162,13 @@ export function Home() {
       setIsTurnstileVerified(true); // 验证通过
       // feat: 使用选定的域名创建邮箱
       const mailbox = `${randomName("", getRandomCharacter())}@${selectedDomain}`;
+      // feat: 计算并存储过期时间戳 (当前时间 + 24小时)
+      const now = Date.now();
+      const expires = now + 24 * 60 * 60 * 1000;
       Cookies.set('userMailbox', mailbox, { expires: 1 }); // cookie 有效期1天
+      Cookies.set('emailExpiry', expires.toString(), { expires: 1 }); // 存储过期时间戳
       setAddress(mailbox);
+      setExpiryTimestamp(expires); // 更新状态
       setHasReceivedEmail(false); // 重置接收邮件状态
       toast.success(t('Email created successfully')); // feat: 使用全局 toast 提示
     } catch (error) {
@@ -159,9 +180,12 @@ export function Home() {
   // 停止使用当前邮箱地址
   const handleStopAddress = () => {
     Cookies.remove('userMailbox');
+    // feat: 移除过期时间 cookie
+    Cookies.remove('emailExpiry');
     setAddress(undefined);
     setHasReceivedEmail(false); // 重置状态
     setSelectedEmail(null); // 清除选中的邮件
+    setExpiryTimestamp(undefined); // 清除过期时间状态
     queryClient.invalidateQueries({ queryKey: ['emails'] }); // 清理缓存
   };
 
@@ -171,6 +195,18 @@ export function Home() {
     toast.success(t('Mailbox refreshed'));
   };
 
+  // 修改：将延长邮箱有效期改为重置邮箱有效期
+  const handleResetExpiry = useCallback(() => {
+    // feat: 计算新的过期时间戳 (当前时间 + 24小时)
+    const newExpiry = Date.now() + 24 * 60 * 60 * 1000;
+    // 计算新的 Cookie 过期时间（相对于当前时间1天）
+    const cookieExpires = new Date(Date.now() + 24 * 60 * 60 * 1000);
+
+    Cookies.set('emailExpiry', newExpiry.toString(), { expires: cookieExpires }); // 更新 Cookie，有效期设为从现在起1天
+    setExpiryTimestamp(newExpiry); // 更新状态
+    toast.success(t('Validity reset successfully')); // 修改：显示重置成功提示
+  }, [t]); // 依赖项仅包含 t，因为函数内部不再依赖 expiryTimestamp
+
   // 删除邮件的 useMutation hook
   const deleteMutation = useMutation({
     mutationFn: (ids: string[]) => deleteEmails(ids),
@@ -203,8 +239,13 @@ export function Home() {
     try {
       // fix: 调用更新后的 loginByPassword 函数，不再传递 token
       const data = await loginByPassword(password);
+      // feat: 登录成功后也设置过期时间戳
+      const now = Date.now();
+      const expires = now + 24 * 60 * 60 * 1000;
       Cookies.set('userMailbox', data.address, { expires: 1 });
+      Cookies.set('emailExpiry', expires.toString(), { expires: 1 });
       setAddress(data.address);
+      setExpiryTimestamp(expires); // 更新状态
       setShowPasswordModal(false); // 关闭模态框
       toast.success(t("Login successful"));
     } catch (error: any) {
@@ -264,10 +305,12 @@ export function Home() {
         {address ? (
           <div className="w-full md:max-w-[350px] mb-4">
             <div className="mb-4 font-semibold text-sm">{t("Email address")}</div>
-            <div className="flex items-center mb-6 text-zinc-100 bg-white/10 backdrop-blur-xl shadow-inner px-4 py-4 rounded-md w-full">
+            <div className="flex items-center text-zinc-100 bg-white/10 backdrop-blur-xl shadow-inner px-4 py-4 rounded-md w-full">
               <span className="truncate">{address}</span>
               <CopyButton text={address} className="p-1 rounded-md ml-auto" />
             </div>
+            {/* 修改：将 onExtend 更改为 onReset 并传递 handleResetExpiry */}
+            {expiryTimestamp && <CountdownTimer expiryTimestamp={expiryTimestamp} onReset={handleResetExpiry} />}
             <button
               onClick={handleStopAddress}
               className="py-2.5 rounded-md w-full bg-cyan-600 hover:opacity-90 disabled:cursor-not-allowed disabled:bg-zinc-500">
diff --git a/worker/src/index.ts b/worker/src/index.ts
