feat: implement reply functionality and update docs

Author: Syntax-Error-1337

README.md

@@ -79,6 +79,7 @@ Open-Temp-Mail uses `wrangler.toml` for configuration.
 - `ADMIN_PASSWORD`: Secure password for admin access.
 - `JWT_TOKEN`: Random string for session security.
 - `RESEND_API_KEY`: (Optional) For sending emails via Resend.
+  > **Note**: Resend offers a free tier with 3000 emails/month, which is perfect for personal use.
 
 ## 📦 Deployment
 

src/components/shared/ComposeEmail.tsx

@@ -7,13 +7,16 @@ import { Loader2, Send } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import toast from 'react-hot-toast';
 
-export function ComposeEmail({ onClose }: { onClose?: () => void }) {
+export function ComposeEmail({ onClose, initialValues }: { 
+    onClose?: () => void;
+    initialValues?: { to?: string; subject?: string; body?: string; isHtml?: boolean } 
+}) {
     const { user } = useAuth();
     const { sendEmail, isSending } = useSender();
-    const [to, setTo] = useState('');
-    const [subject, setSubject] = useState('');
-    const [body, setBody] = useState('');
-    const [isHtml, setIsHtml] = useState(false);
+    const [to, setTo] = useState(initialValues?.to || '');
+    const [subject, setSubject] = useState(initialValues?.subject || '');
+    const [body, setBody] = useState(initialValues?.body || '');
+    const [isHtml, setIsHtml] = useState(initialValues?.isHtml || false);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();

src/pages/mailbox/Compose.tsx

@@ -1,13 +1,20 @@
 import { ComposeEmail } from '@/components/shared/ComposeEmail';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 export default function ComposePage() {
     const navigate = useNavigate();
+    const location = useLocation();
+    const initialValues = location.state as { to?: string; subject?: string; body?: string } | undefined;
 
     return (
         <div className="container max-w-2xl py-8">
-            <h1 className="text-2xl font-bold mb-6">Compose New Email</h1>
-            <ComposeEmail onClose={() => navigate('/sent')} />
+            <h1 className="text-2xl font-bold mb-6">
+                {initialValues?.to ? 'Reply to Email' : 'Compose New Email'}
+            </h1>
+            <ComposeEmail 
+                onClose={() => navigate('/sent')} 
+                initialValues={initialValues}
+            />
         </div>
     );
 }

src/pages/mailbox/index.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/context/AuthContext';
 import { apiFetch } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Trash2, RefreshCw, MailOpen, Mail, Search, KeyRound, Loader2 } from 'lucide-react';
+import { Trash2, RefreshCw, MailOpen, Mail, Search, KeyRound, Loader2, Send } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import toast from 'react-hot-toast';
 import { cn } from '@/lib/utils';
@@ -32,6 +32,7 @@ interface EmailDetail extends EmailSummary {
 
 export default function Mailbox() {
     const { user } = useAuth();
+    const navigate = useNavigate();
     const [searchParams] = useSearchParams();
     const queryMailbox = searchParams.get('mailbox');
 
@@ -137,6 +138,16 @@ export default function Mailbox() {
         }
     };
 
+    const handleReply = (email: EmailDetail) => {
+        navigate('/compose', {
+            state: {
+                to: email.sender,
+                subject: email.subject.startsWith('Re:') ? email.subject : `Re: ${email.subject}`,
+                body: `\n\n\n--- Original Message ---\nFrom: ${email.sender}\nDate: ${new Date(email.received_at).toLocaleString()}\nSubject: ${email.subject}\n\n`
+            }
+        });
+    };
+
     return (
         <div className="h-[calc(100vh-4rem)] flex flex-col md:flex-row p-4 gap-4">
             {/* Email List */}
@@ -262,6 +273,12 @@ export default function Mailbox() {
                                     </div>
                                 </div>
                                 <div className="flex items-center gap-2">
+                                    <Button variant="outline" size="sm" onClick={() => handleReply(selectedEmail)}>
+                                        <div className="flex items-center">
+                                            <span className="mr-2">Reply</span>
+                                            <Send className="h-3 w-3" />
+                                        </div>
+                                    </Button>
                                     {selectedEmail.download && (
                                         <Button variant="outline" size="sm" asChild>
                                             <a href={selectedEmail.download} download>Download EML</a>

worker/src/api/send.js

@@ -27,6 +27,13 @@ async function checkSendPermission(request, db, options) {
 
   // 管理员默认允许
   if (payload.role === 'admin') return true;
+
+  // 邮箱用户允许（必须匹配 from 地址）
+  if (payload.role === 'mailbox') {
+    const fromAddr = options.fromAddress || '';
+    return fromAddr && payload.mailboxAddress && 
+           fromAddr.toLowerCase() === payload.mailboxAddress.toLowerCase();
+  }
 
   // 普通用户检查 can_send 权限（使用缓存）
   if (payload.userId) {
@@ -114,9 +121,11 @@ export async function handleSendApi(request, db, url, path, options) {
     try {
       if (!RESEND_API_KEY) return errorResponse('未配置 Resend API Key', 500);
 
-      const allowed = await checkSendPermission(request, db, options);
-      if (!allowed) return errorResponse('未授权发件或该用户未被授予发件权限', 403);
       const sendPayload = await request.json();
+      
+      // 添加 fromAddress 到 options 以供权限检查使用
+      const checkOptions = { ...options, fromAddress: sendPayload.from };
+      const allowed = await checkSendPermission(request, db, checkOptions);
       const result = await sendEmailWithAutoResend(RESEND_API_KEY, sendPayload);
       await recordSentEmail(db, {
         resendId: result.id || null,

worker/src/routes/index.js

@@ -110,7 +110,7 @@ export function createRouter() {
               success: true,
               role: 'mailbox',
               mailbox: mailboxInfo.address,
-              can_send: 0,
+              can_send: 1,
               mailbox_limit: 1
             }), { headers });
           }