39 |
41 | )}
42 | {children}
53 |
14 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { OTPInput, OTPInputContext } from "input-otp"
5 | import { Dot } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const InputOTP = React.forwardRef<
10 | React.ElementRef
15 |
23 |
24 |
16 | 
21 |
22 |
21 | 25 | {currentLocale === "en" ? "Temp Mail" : "临时邮件"} 26 |
27 | 28 |29 | {currentLocale === "en" 30 | ? "Protect your personal email address from spam, bots, phishing, and other online abuse with our free temporary disposable anonymous email service." 31 | : "使用我们的免费临时一次性匿名邮件服务，保护您的个人邮箱地址免受垃圾邮件、机器人、钓鱼和其他在线滥用的侵害。" 32 | } 33 |
34 | 35 |36 | {currentLocale === "en" 37 | ? "No commitments, no risks—just secure, instant access to a temp email address." 38 | : "无需承诺，无风险——只需安全、即时地访问临时邮箱地址。" 39 | } 40 |
41 | 42 |43 | {currentLocale === "en" 44 | ? "Powered by Mail.tm's free API service. We thank Mail.tm for providing reliable temporary email infrastructure." 45 | : "由 Mail.tm 的免费 API 服务提供支持。我们感谢 Mail.tm 提供可靠的临时邮件基础设施。" 46 | } 47 |
48 | 49 | {!isAuthenticated && ( 50 | 53 | )} 54 |
50 | {char}
51 | {hasFakeCaret && (
52 |
57 | )
58 | })
59 | InputOTPSlot.displayName = "InputOTPSlot"
60 |
61 | const InputOTPSeparator = React.forwardRef<
62 | React.ElementRef<"div">,
63 | React.ComponentPropsWithoutRef<"div">
64 | >(({ ...props }, ref) => (
65 |
53 |
54 |
55 | )}
56 |
66 |
68 | ))
69 | InputOTPSeparator.displayName = "InputOTPSeparator"
70 |
71 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
72 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | }
8 |
9 | @layer utilities {
10 | .text-balance {
11 | text-wrap: balance;
12 | }
13 | }
14 |
15 | @layer base {
16 | :root {
17 | --background: 0 0% 100%;
18 | --foreground: 0 0% 3.9%;
19 | --card: 0 0% 100%;
20 | --card-foreground: 0 0% 3.9%;
21 | --popover: 0 0% 100%;
22 | --popover-foreground: 0 0% 3.9%;
23 | --primary: 0 0% 9%;
24 | --primary-foreground: 0 0% 98%;
25 | --secondary: 0 0% 96.1%;
26 | --secondary-foreground: 0 0% 9%;
27 | --muted: 0 0% 96.1%;
28 | --muted-foreground: 0 0% 45.1%;
29 | --accent: 0 0% 96.1%;
30 | --accent-foreground: 0 0% 9%;
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 0 0% 98%;
33 | --border: 0 0% 89.8%;
34 | --input: 0 0% 89.8%;
35 | --ring: 0 0% 3.9%;
36 | --chart-1: 12 76% 61%;
37 | --chart-2: 173 58% 39%;
38 | --chart-3: 197 37% 24%;
39 | --chart-4: 43 74% 66%;
40 | --chart-5: 27 87% 67%;
41 | --radius: 0.5rem;
42 | --sidebar-background: 0 0% 98%;
43 | --sidebar-foreground: 240 5.3% 26.1%;
44 | --sidebar-primary: 240 5.9% 10%;
45 | --sidebar-primary-foreground: 0 0% 98%;
46 | --sidebar-accent: 240 4.8% 95.9%;
47 | --sidebar-accent-foreground: 240 5.9% 10%;
48 | --sidebar-border: 220 13% 91%;
49 | --sidebar-ring: 217.2 91.2% 59.8%;
50 | }
51 | .dark {
52 | --background: 0 0% 3.9%;
53 | --foreground: 0 0% 98%;
54 | --card: 0 0% 3.9%;
55 | --card-foreground: 0 0% 98%;
56 | --popover: 0 0% 3.9%;
57 | --popover-foreground: 0 0% 98%;
58 | --primary: 0 0% 98%;
59 | --primary-foreground: 0 0% 9%;
60 | --secondary: 0 0% 14.9%;
61 | --secondary-foreground: 0 0% 98%;
62 | --muted: 0 0% 14.9%;
63 | --muted-foreground: 0 0% 63.9%;
64 | --accent: 0 0% 14.9%;
65 | --accent-foreground: 0 0% 98%;
66 | --destructive: 0 62.8% 30.6%;
67 | --destructive-foreground: 0 0% 98%;
68 | --border: 0 0% 14.9%;
69 | --input: 0 0% 14.9%;
70 | --ring: 0 0% 83.1%;
71 | --chart-1: 220 70% 50%;
72 | --chart-2: 160 60% 45%;
73 | --chart-3: 30 80% 55%;
74 | --chart-4: 280 65% 60%;
75 | --chart-5: 340 75% 55%;
76 | --sidebar-background: 240 5.9% 10%;
77 | --sidebar-foreground: 240 4.8% 95.9%;
78 | --sidebar-primary: 224.3 76.3% 48%;
79 | --sidebar-primary-foreground: 0 0% 100%;
80 | --sidebar-accent: 240 3.7% 15.9%;
81 | --sidebar-accent-foreground: 240 4.8% 95.9%;
82 | --sidebar-border: 240 3.7% 15.9%;
83 | --sidebar-ring: 217.2 91.2% 59.8%;
84 | }
85 | }
86 |
87 | @layer base {
88 | * {
89 | @apply border-border;
90 | }
91 | body {
92 | @apply bg-background text-foreground;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { ChevronLeft, ChevronRight } from "lucide-react"
5 | import { DayPicker } from "react-day-picker"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { buttonVariants } from "@/components/ui/button"
9 |
10 | export type CalendarProps = React.ComponentProps
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
53 |
82 | )
83 | }
84 |
--------------------------------------------------------------------------------
/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Drawer as DrawerPrimitive } from "vaul"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Drawer = ({
9 | shouldScaleBackground = true,
10 | ...props
11 | }: React.ComponentProps
54 | {features.map((feature, index) => {
55 | const Icon = feature.icon
56 | return (
57 |
58 |
59 |
67 |
68 | )
69 | })}
70 |
71 |
72 | {/* 感谢 Mail.tm 的说明 */}
73 |
60 |
64 |
61 |
63 | {feature.title}
65 |{feature.description}
66 |
74 |
81 | 75 | {currentLocale === "en" 76 | ? "Powered by Mail.tm's free API service. Special thanks to Mail.tm for providing reliable temporary email infrastructure that makes this service possible." 77 | : "由 Mail.tm 的免费 API 服务提供支持。特别感谢 Mail.tm 提供可靠的临时邮件基础设施，使这项服务成为可能。" 78 | } 79 |
80 |
55 |
66 | )}
67 |
68 |
56 |
65 |
57 |
62 |
63 | duckmail.sbs
64 |
62 |
69 | {menuItems.map((item) => {
70 | const Icon = item.icon
71 | return (
72 | }
78 | onPress={() => onItemClick(item.id)}
79 | >
80 | {item.label}
81 |
82 | )
83 | })}
84 |
85 |
86 |
87 | {bottomItems.map((item) => {
88 | const Icon = item.icon
89 | return (
90 | }
96 | onPress={() => onItemClick(item.id)}
97 | >
98 | {item.label}
99 |
100 | )
101 | })}
102 |
103 |
105 | © duckmail.sbs
104 |
2 |
3 |
4 | # DuckMail - 临时邮件服务
5 |
6 | **安全、即时、快速的临时邮箱服务**
7 |
8 | [English](./README.en.md) | 中文
9 |
10 | 一个基于 Next.js 和 Mail.tm API 构建的现代化临时邮件服务，提供安全、快速、匿名的一次性邮箱功能。
11 |
12 | **🌐 [立即使用 duckmail.sbs](https://duckmail.sbs)**
13 |
14 |
15 | ## ✨ 特性
16 |
17 | - 🔒 **安全可靠** - 使用 Mail.tm 的可靠基础设施
18 | - ⚡ **即时可用** - 立即获得临时邮箱地址
19 | - 🌐 **多语言支持** - 支持中文和英文，自动检测浏览器语言
20 | - 🎨 **现代化界面** - 基于 HeroUI 的精美设计
21 | - 🔄 **实时更新** - 支持 Mercure SSE 实时消息推送
22 | - 🌙 **深色模式** - 支持明暗主题切换
23 | - 📧 **多账户管理** - 支持创建和管理多个临时邮箱
24 | - 🔧 **多API提供商** - 支持 DuckMail API 和 Mail.tm API 切换
25 | - 🔑 **API Key 支持** - 可选配置 API Key 获得更多域名选择和私有域名权限
26 | - 🔗 **开源透明** - 支持社区贡献
27 |
28 | ## 📸 应用展示
29 |
30 |
3 |
4 | # DuckMail - 临时邮件服务
5 |
6 | **安全、即时、快速的临时邮箱服务**
7 |
8 | [English](./README.en.md) | 中文
9 |
10 | 一个基于 Next.js 和 Mail.tm API 构建的现代化临时邮件服务，提供安全、快速、匿名的一次性邮箱功能。
11 |
12 | **🌐 [立即使用 duckmail.sbs](https://duckmail.sbs)**
13 |
31 | 
32 | 
35 |
37 |
38 | ## 🚀 快速开始
39 |
40 | ### 一键部署
41 |
42 | #### Netlify 部署（推荐）
43 |
44 | 点击下面的按钮，一键部署到 Netlify：
45 |
46 | [](https://app.netlify.com/start/deploy?repository=https://github.com/moonwesif/duckmail)
47 |
48 | > 🎉 **零配置部署** - 点击按钮后，Netlify 会自动 fork 项目到你的 GitHub 账户并开始部署，无需任何额外配置！
49 |
50 | #### Vercel 部署
51 |
52 | 点击下面的按钮，一键部署到 Vercel：
53 |
54 | [](https://vercel.com/new/clone?repository-url=https://github.com/moonwesif/duckmail)
55 |
56 | > ⚠️ **注意**：Vercel 部署仅支持 DuckMail API，不支持 Mail.tm API（因为 Mail.tm 屏蔽了 Vercel 的 IP 地址）。部署后请在设置中禁用 Mail.tm 提供商。
57 | >
58 | > 🚀 **零配置**：Vercel 会自动检测 Next.js 项目并使用最佳配置进行部署。
59 |
60 | ## 📧 API 说明
61 |
62 | 本项目使用 DuckMail 自建的邮箱后端服务器，支持以下操作
63 |
64 | - **账户管理**: 创建、登录临时邮箱账户
65 | - **邮件接收**: 实时接收和查看邮件
66 | - **域名获取**: 获取可用的邮箱域名
67 | - **实时通知**: 通过 Mercure Hub 获取实时消息推送
68 |
69 | 通过 https://www.duckmail.sbs/api-docs 界面来获取接口文档与调试
70 |
71 | ### API Key 功能（可选）
72 |
73 | 应用支持可选的 API Key 配置，提供增强功能：
74 |
75 | - **无 API Key**: 使用公共域名，基础功能完整可用
76 | - **有 API Key**: 获得更多域名选择和私有域名创建权限
77 |
78 | **配置方法**：
79 | 1. 点击右上角设置按钮
80 | 2. 在 "API Key 设置" 区域输入您的 API Key
81 | 3. 点击保存即可生效
82 |
83 | #### API Key 获取方式
84 | 1. 访问 https://domain.duckmail.sbs
85 | 2. LinuxDo 鉴权登录
86 | 3. 点击左侧栏 API Key 选项，新建 API key
87 |
88 | ### API 限制
89 |
90 | - 请求频率限制: 8 QPS, 如有特殊需求（如公益行为等），请邮件申请提高配额。
91 | - 邮箱有效期: 邮件均保存三天，之后自动删除。账号不会删除，仍可以通过相同的信息登录接码
92 | - 无密码找回功能
93 |
94 | #### 关于鉴权
95 |
96 | 1. 所有接口无需API Key均可使用，创建邮箱时会获取邮箱的 Token 用于邮箱相关操作的鉴权
97 | 2. Domains 与 accounts 接口支持额外传入API Key Header以进行鉴权，传入 API Key 后，可获取该 API Key 下的私有域名，同时使用私有域名创建新的邮箱账户，其他操作均相同。
98 |
99 | ## 📄 许可证
100 |
101 | 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
102 |
103 | ## 🙏 致谢
104 |
105 | - [Mail.tm](https://mail.tm) - 提供免费可靠的临时邮件 API 服务
106 |
107 | ## 📞 联系
108 |
109 | 如有问题或建议，请通过以下方式联系：
110 |
111 | - 创建 [Issue](https://github.com/moonwesif/duckmail/issues)
112 | - 发送邮件到: syferie@proton.me
113 |
114 | ## 💖 赞助支持
115 |
116 | 如果这个项目对你有帮助，欢迎赞助支持开发者继续维护和改进项目，项目后端成本高昂，您的支持将会帮助项目持续发展。：
117 |
118 | [](https://afdian.com/a/syferie)
119 |
120 | 你的支持是项目持续发展的动力！🚀
121 |
122 | ---
123 |
124 | ⭐ 如果这个项目对你有帮助，请给它一个星标！
125 |
--------------------------------------------------------------------------------
/hooks/use-smart-mail-checker.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useCallback, useRef, useState, useEffect } from "react"
4 | import { useMercureSSE } from "./use-mercure-sse"
5 | import { useMailChecker } from "./use-mail-checker"
6 | import { getMessages } from "@/lib/api"
7 | import { useAuth } from "@/contexts/auth-context"
8 | import type { Message } from "@/types"
9 |
10 | interface UseSmartMailCheckerOptions {
11 | onNewMessage?: (message: Message) => void
12 | onMessagesUpdate?: (messages: Message[]) => void
13 | enabled?: boolean
14 | }
15 |
16 | export function useSmartMailChecker({
17 | onNewMessage,
18 | onMessagesUpdate,
19 | enabled = true, // 这个参数只控制轮询策略，不影响 Mercure
20 | }: UseSmartMailCheckerOptions = {}) {
21 | const { token, currentAccount } = useAuth()
22 | const lastUsedRef = useRef
32 | 主界面 - 简洁现代的设计
33 | 34 |
35 | 邮件管理 - 实时接收和管理临时邮件
36 |163 | {body} 164 |
165 | ) 166 | }) 167 | FormMessage.displayName = "FormMessage" 168 | 169 | export { 170 | useFormField, 171 | Form, 172 | FormItem, 173 | FormLabel, 174 | FormControl, 175 | FormDescription, 176 | FormMessage, 177 | FormField, 178 | } 179 | -------------------------------------------------------------------------------- /components/ui/alert-dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" 5 | 6 | import { cn } from "@/lib/utils" 7 | import { buttonVariants } from "@/components/ui/button" 8 | 9 | const AlertDialog = AlertDialogPrimitive.Root 10 | 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger 12 | 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal 14 | 15 | const AlertDialogOverlay = React.forwardRef< 16 | React.ElementRef
43 |
53 | ))
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
53 |
54 |
55 |
70 |
71 |
72 |
86 |
87 |
121 |
122 | )}
123 |
124 |
135 |
56 |
69 |
58 |
68 | 59 | {isZh ? "重要提醒" : "Important Notice"} 60 |
61 |62 | {isZh 63 | ? "切换到不同的 API 提供商将会影响您的账户访问。每个账户都绑定到特定的提供商。" 64 | : "Switching to a different API provider will affect your account access. Each account is bound to a specific provider." 65 | } 66 |
67 |
73 |
83 |
84 | {currentProviderAccounts.length > 0 && (
85 | 74 | {isZh ? "切换详情：" : "Switch Details:"} 75 |
76 |77 | {isZh 78 | ? `您正在从当前提供商切换到 ${newProvider.name}` 79 | : `You are switching from current provider to ${newProvider.name}` 80 | } 81 |
82 |
88 |
120 |
90 |
119 | 91 | {isZh ? "当前提供商的账户" : "Current Provider Accounts"} 92 |
93 |
94 | {currentProviderAccounts.map((account) => (
95 |
112 |
103 | {account.address}
104 | {account.id === currentAccount?.id && (
105 |
106 | ({isZh ? "当前" : "Current"})
107 |
108 | )}
109 |
110 | ))}
111 | 113 | {isZh 114 | ? "这些账户在新提供商中将不可用。您需要在新提供商中创建新账户。" 115 | : "These accounts will not be available in the new provider. You'll need to create new accounts in the new provider." 116 | } 117 |
118 |
125 |
134 | 126 | {isZh ? "切换后会发生什么：" : "What happens after switching:"} 127 |
128 |-
129 |
- • {isZh ? "您将被登出当前账户" : "You will be logged out of current account"} 130 |
- • {isZh ? "需要在新提供商中创建或登录账户" : "You'll need to create or login to accounts in the new provider"} 131 |
- • {isZh ? "之前的账户信息将被保留，可以随时切换回来" : "Previous account information will be preserved and you can switch back anytime"} 132 |
2 |
3 |
4 | # DuckMail - Temporary Email Service
5 |
6 | **Secure, Instant, Fast Temporary Email Service**
7 |
8 | English | [中文](./README.md)
9 |
10 | A modern temporary email service built with Next.js and Mail.tm API, providing secure, fast, and anonymous disposable email functionality.
11 |
12 | **🌐 [Try it now at duckmail.sbs](https://duckmail.sbs)**
13 |
14 |
15 | ## ✨ Features
16 |
17 | - 🔒 **Secure & Reliable** - Built on Mail.tm's reliable infrastructure
18 | - ⚡ **Instant Access** - Get temporary email addresses instantly
19 | - 🌐 **Multi-language Support** - Supports Chinese and English, automatic browser language detection
20 | - 📱 **Responsive Design** - Perfect for both desktop and mobile devices
21 | - 🎨 **Modern UI** - Beautiful design based on HeroUI components
22 | - 🔄 **Real-time Updates** - Supports Mercure SSE for real-time message notifications
23 | - 🌙 **Dark Mode** - Light and dark theme support
24 | - 📧 **Multi-account Management** - Create and manage multiple temporary email accounts
25 | - 🔧 **Multi-API Provider** - Support switching between DuckMail API and Mail.tm API
26 | - 🎯 **Smart Error Handling** - Elegant error messages and automatic retry mechanisms
27 | - 🔗 **Open Source** - Fully open source with community contributions
28 | - 🔧 **Multi-API Provider** - Support switching between DuckMail API and Mail.tm API
29 | - 🎯 **Smart Error Handling** - Elegant error messages and automatic retry mechanisms
30 | - 🔗 **Open Source** - Fully open source with community contributions
31 |
32 | ## 📸 Screenshots
33 |
34 |
3 |
4 | # DuckMail - Temporary Email Service
5 |
6 | **Secure, Instant, Fast Temporary Email Service**
7 |
8 | English | [中文](./README.md)
9 |
10 | A modern temporary email service built with Next.js and Mail.tm API, providing secure, fast, and anonymous disposable email functionality.
11 |
12 | **🌐 [Try it now at duckmail.sbs](https://duckmail.sbs)**
13 |
35 |
36 |
39 |
41 |
42 | ## 🚀 Quick Start
43 |
44 | ### One-Click Deploy
45 |
46 | #### Netlify Deploy (Recommended)
47 |
48 | Click the button below to deploy to Netlify with one click:
49 |
50 | [](https://app.netlify.com/start/deploy?repository=https://github.com/moonwesif/duckmail)
51 |
52 | > 🎉 **Zero Configuration Deployment** - After clicking the button, Netlify will automatically fork the project to your GitHub account and start deployment, no additional configuration required!
53 |
54 | #### Vercel Deploy
55 |
56 | Click the button below to deploy to Vercel with one click:
57 |
58 | [](https://vercel.com/new/clone?repository-url=https://github.com/moonwesif/duckmail)
59 |
60 | > ⚠️ **Note**: Vercel deployment only supports DuckMail API, not Mail.tm API (because Mail.tm blocks Vercel's IP addresses). Please disable the Mail.tm provider in settings after deployment.
61 | >
62 | > 🚀 **Zero Configuration**: Vercel automatically detects Next.js projects and uses optimal configuration for deployment.
63 |
64 | ### Local Development
65 |
66 | #### Prerequisites
67 |
68 | - Node.js 18+
69 | - npm or pnpm
70 |
71 | #### Installation
72 |
73 | ```bash
74 | # Clone the repository
75 | git clone https://github.com/moonwesif/duckmail.git
76 | cd duckmail
77 |
78 | # Install dependencies
79 | npm install
80 | # or
81 | pnpm install
82 | ```
83 |
84 | ### Development
85 |
86 | ```bash
87 | # Start development server
88 | npm run dev
89 | # or
90 | pnpm dev
91 | ```
92 |
93 | Open [http://localhost:3000](http://localhost:3000) to view the application.
94 |
95 | ### Production Build
96 |
97 | ```bash
98 | # Build for production
99 | npm run build
100 | npm start
101 |
102 | # or
103 | pnpm build
104 | pnpm start
105 | ```
106 |
107 | ## 🛠️ Tech Stack
108 |
109 | - **Frontend Framework**: Next.js 15
110 | - **UI Component Library**: HeroUI
111 | - **Styling**: Tailwind CSS
112 | - **Icons**: Lucide React
113 | - **API**: Mail.tm REST API / DuckMail API
114 | - **Real-time Communication**: Mercure SSE
115 | - **Language**: TypeScript
116 |
117 | ## 🌐 Deployment Guide
118 |
119 | ### Platform Compatibility
120 |
121 | | Platform | DuckMail API | Mail.tm API | Rating |
122 | |----------|-------------|-------------|--------|
123 | | **Netlify** | ✅ Supported | ✅ Supported | ⭐⭐⭐⭐⭐ |
124 | | **Vercel** | ✅ Supported | ❌ Not Supported* | ⭐⭐⭐⭐ |
125 | | **Other Platforms** | ✅ Supported | ✅ Supported | ⭐⭐⭐ |
126 |
127 | > *Mail.tm blocks Vercel's IP addresses, so Vercel deployment cannot use Mail.tm API.
128 |
129 | ### Deployment Recommendations
130 |
131 | - **Full Features**: Recommended to use **Netlify**, supports all API providers
132 | - **Quick Deploy**: Can use **Vercel**, but need to disable Mail.tm provider in settings
133 |
134 | ## 📧 API Documentation
135 |
136 | This project uses the free API service provided by [Mail.tm](https://mail.tm):
137 |
138 | - **Account Management**: Create and login to temporary email accounts
139 | - **Email Reception**: Real-time email receiving and viewing
140 | - **Domain Retrieval**: Get available email domains
141 | - **Real-time Notifications**: Real-time message push via Mercure Hub
142 |
143 | ### API Limitations
144 |
145 | - Rate Limit: 8 QPS
146 | - Email Validity: According to Mail.tm policy
147 | - No password recovery functionality
148 |
149 | ## 🤝 Contributing
150 |
151 | Contributions are welcome! Please follow these steps:
152 |
153 | 1. Fork the project
154 | 2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
155 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
156 | 4. Push to the branch (`git push origin feature/AmazingFeature`)
157 | 5. Create a Pull Request
158 |
159 | ## 📄 License
160 |
161 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
162 |
163 | ## 🙏 Acknowledgments
164 |
165 | - [Mail.tm](https://mail.tm) - For providing free and reliable temporary email API service
166 | - [HeroUI](https://heroui.com) - Modern React UI component library
167 | - [Next.js](https://nextjs.org) - Powerful React framework
168 | - [Tailwind CSS](https://tailwindcss.com) - Utility-first CSS framework
169 |
170 | ## 📞 Contact
171 |
172 | If you have any questions or suggestions, please contact us through:
173 |
174 | - Create an [Issue](https://github.com/moonwesif/duckmail/issues)
175 | - Send email to: syferie@proton.me
176 |
177 | ## 💖 Sponsor
178 |
179 | If this project helps you, welcome to sponsor and support the developer to continue maintaining and improving the project:
180 |
181 | [](https://afdian.com/a/syferie)
182 |
183 | Your support is the driving force for the project's continued development! 🚀
184 |
185 | ---
186 |
187 | ⭐ If this project helps you, please give it a star!
188 |
--------------------------------------------------------------------------------
/components/mercure-test.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState, useEffect } from "react"
4 | import { Button } from "@heroui/button"
5 | import { Card, CardBody, CardHeader } from "@heroui/card"
6 | import { useAuth } from "@/contexts/auth-context"
7 | import { useApiProvider } from "@/contexts/api-provider-context"
8 |
9 | export function MercureTest() {
10 | const { currentAccount } = useAuth()
11 | const { getProviderById } = useApiProvider()
12 | const [isConnected, setIsConnected] = useState(false)
13 | const [events, setEvents] = useState
36 | Main Interface - Clean and Modern Design
37 | 38 |
39 | Email Management - Real-time Email Reception and Management
40 |请先登录账户以测试 Mercure 功能
118 |
125 |
126 |
127 |
129 |
130 |
167 |
168 |
169 |
170 |
171 |
173 |
174 |
206 |
207 |
208 | )
209 | }
210 |
--------------------------------------------------------------------------------
/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import useEmblaCarousel, {
5 | type UseEmblaCarouselType,
6 | } from "embla-carousel-react"
7 | import { ArrowLeft, ArrowRight } from "lucide-react"
8 |
9 | import { cn } from "@/lib/utils"
10 | import { Button } from "@/components/ui/button"
11 |
12 | type CarouselApi = UseEmblaCarouselType[1]
13 | type UseCarouselParameters = ParametersDuckMail Mercure 实时功能测试
128 |
131 |
151 |
152 | {error && (
153 |
132 |
133 | {isConnected ? '已连接' : '未连接'}
134 |
135 |
136 |
137 | {!isConnected ? (
138 |
141 | ) : (
142 |
145 | )}
146 |
149 |
150 |
154 | {error}
155 |
156 | )}
157 |
158 |
159 |
166 | 连接信息:
160 |
161 |
165 | 账户ID: {currentAccount.id}
162 |Mercure Topic: /accounts/{currentAccount.id}
163 |事件数量: {events.length}
164 |实时事件日志
172 |
175 | {events.length === 0 ? (
176 |
205 | 暂无事件
177 | ) : ( 178 | events.map((event, index) => ( 179 |
180 |
202 | ))
203 | )}
204 |
181 |
186 | {event.type}
187 |
188 |
189 | {new Date(event.timestamp).toLocaleTimeString()}
190 |
191 |
192 |
193 | {event.data ? (
194 |
201 |
195 | {JSON.stringify(event.data, null, 2)}
196 |
197 | ) : (
198 | event.message
199 | )}
200 |
145 | {children}
146 |
147 |
161 |
170 |
171 | )
172 | })
173 | CarouselContent.displayName = "CarouselContent"
174 |
175 | const CarouselItem = React.forwardRef<
176 | HTMLDivElement,
177 | React.HTMLAttributes