From 5d7a6d7bad46e5e25068efff014991150caced93 Mon Sep 17 00:00:00 2001
From: beilunyang <786220806@qq.com>
Date: Wed, 18 Dec 2024 02:38:04 +0800
Subject: [PATCH] feat: Add Webhook integration and update README with new
 features

---
 README.md                                 |  54 +++++++++
 app/components/profile/webhook-config.tsx | 134 +++++++++++++++-------
 2 files changed, 145 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index e26cef6..b99366e 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@
 
 ![邮箱](https://pic.otaku.ren/20241209/AQADw8UxG9k1uVZ-.jpg "邮箱")
 
+![个人中心](https://pic.otaku.ren/20241217/AQAD9sQxG0g1EVd-.jpg "个人中心")
+
 ## 特性
 
 - 🔒 **隐私保护**：保护您的真实邮箱地址，远离垃圾邮件和不必要的订阅
@@ -38,6 +40,7 @@
 - 📱 **PWA 支持**：支持 PWA 安装
 - 💸 **免费自部署**：基于 Cloudflare 构建, 可实现免费自部署，无需任何费用
 - 🎉 **可爱的 UI**：简洁可爱萌萌哒 UI 界面
+- 🔔 **Webhook 通知**：支持通过 webhook 接收新邮件通知
 
 ## 技术栈
 
@@ -194,6 +197,57 @@ git push origin v1.0.0
 - 在 Settings 中选择变量和机密
 - 添加 AUTH_GITHUB_ID, AUTH_GITHUB_SECRET, AUTH_SECRET
 
+## Webhook 集成
+
+当收到新邮件时，系统会向用户配置并且已启用的 Webhook URL 发送 POST 请求。
+
+### 请求头
+```http
+Content-Type: application/json
+X-Webhook-Event: new_message
+```
+
+### 请求体
+```json
+{
+  "emailId": "email-uuid",
+  "messageId": "message-uuid",
+  "fromAddress": "sender@example.com",
+  "subject": "邮件主题",
+  "content": "邮件文本内容",
+  "html": "邮件HTML内容",
+  "receivedAt": "2024-01-01T12:00:00.000Z",
+  "toAddress": "your-email@moemail.app"
+}
+```
+
+### 配置说明
+1. 点击个人头像，进入个人中心
+2. 在个人中心启用 Webhook
+3. 设置接收通知的 URL
+4. 点击测试按钮验证配置
+5. 保存配置后即可接收新邮件通知
+
+### 测试
+
+项目提供了一个简单的测试服务器, 可以通过如下命令运行:
+
+```bash
+pnpm webhook-test-server
+```
+
+测试服务器会在本地启动一个 HTTP 服务器，监听 3001 端口（http://localhost:3001），并打印收到的 Webhook 消息详情。
+
+如果需要进行外网测试，可以通过 Cloudflare Tunnel 将服务暴露到外网：
+```bash
+pnpx cloudflared tunnel --url http://localhost:3001
+```
+
+### 注意事项
+- Webhook 接口应在 10 秒内响应
+- 非 2xx 响应码会触发重试
+
+
 ## 贡献
 
 欢迎提交 Pull Request 或者 Issue来帮助改进这个项目
diff --git a/app/components/profile/webhook-config.tsx b/app/components/profile/webhook-config.tsx
index 5df4e53..c52ddb8 100644
--- a/app/components/profile/webhook-config.tsx
+++ b/app/components/profile/webhook-config.tsx
@@ -7,7 +7,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Switch } from "@/components/ui/switch"
 import { useToast } from "@/components/ui/use-toast"
-import { Loader2, Send } from "lucide-react"
+import { Loader2, Send, ChevronDown, ChevronUp } from "lucide-react"
 import {
   Tooltip,
   TooltipContent,
@@ -20,6 +20,8 @@ export function WebhookConfig() {
   const [url, setUrl] = useState("")
   const [loading, setLoading] = useState(false)
   const [testing, setTesting] = useState(false)
+  const [showDocs, setShowDocs] = useState(false)
+  const [initialLoading, setInitialLoading] = useState(true)
   const { toast } = useToast()
 
   useEffect(() => {
@@ -30,8 +32,17 @@ export function WebhookConfig() {
         setUrl(data.url)
       })
       .catch(console.error)
+      .finally(() => setInitialLoading(false))
   }, [])
 
+  if (initialLoading) {
+    return (
+      <div className="flex justify-center py-8">
+        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!url) return
@@ -105,49 +116,86 @@ export function WebhookConfig() {
       </div>
 
       {enabled && (
-        <div className="space-y-2">
-          <Label htmlFor="webhook-url">Webhook URL</Label>
-          <div className="flex gap-2">
-            <Input
-              id="webhook-url"
-              placeholder="https://example.com/webhook"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              type="url"
-              required
-            />
-            <Button type="submit" disabled={loading} className="w-20">
-              {loading ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : (
-                "保存"
-              )}
-            </Button>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button 
-                    type="button" 
-                    variant="outline"
-                    onClick={handleTest}
-                    disabled={testing || !url}
-                  >
-                    {testing ? (
-                      <Loader2 className="w-4 h-4 animate-spin" />
-                    ) : (
-                      <Send className="w-4 h-4" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>发送测试消息到此 Webhook</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="webhook-url">Webhook URL</Label>
+            <div className="flex gap-2">
+              <Input
+                id="webhook-url"
+                placeholder="https://example.com/webhook"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                type="url"
+                required
+              />
+              <Button type="submit" disabled={loading} className="w-20">
+                {loading ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  "保存"
+                )}
+              </Button>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button 
+                      type="button" 
+                      variant="outline"
+                      onClick={handleTest}
+                      disabled={testing || !url}
+                    >
+                      {testing ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        <Send className="w-4 h-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>发送测试消息到此 Webhook</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              我们会向此 URL 发送 POST 请求,包含新邮件的相关信息
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <button
+              type="button"
+              className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              onClick={() => setShowDocs(!showDocs)}
+            >
+              {showDocs ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+              查看数据格式说明
+            </button>
+
+            {showDocs && (
+              <div className="rounded-md bg-muted p-4 text-sm space-y-3">
+                <p>当收到新邮件时，我们会向配置的 URL 发送 POST 请求，请求头包含:</p>
+                <pre className="bg-background p-2 rounded text-xs">
+                  Content-Type: application/json{'\n'}
+                  X-Webhook-Event: new_message
+                </pre>
+                
+                <p>请求体示例:</p>
+                <pre className="bg-background p-2 rounded text-xs overflow-auto">
+{`{
+  "emailId": "email-uuid",
+  "messageId": "message-uuid",
+  "fromAddress": "sender@example.com",
+  "subject": "邮件主题",
+  "content": "邮件文本内容",
+  "html": "邮件HTML内容",
+  "receivedAt": "2024-01-01T12:00:00.000Z",
+  "toAddress": "your-email@${window.location.host}"
+}`}
+                </pre>
+              </div>
+            )}
           </div>
-          <p className="text-xs text-muted-foreground">
-            我们会向此 URL 发送 POST 请求,包含新邮件的相关信息
-          </p>
         </div>
       )}
     </form>