feat: profile page & webhook notification

app/components/auth/sign-button.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"
 import Image from "next/image"
 import { signIn, signOut, useSession } from "next-auth/react"
 import { Github } from "lucide-react"
+import Link from "next/link"
 
 export function SignButton() {
   const { data: session, status } = useSession()
@@ -24,7 +25,10 @@ export function SignButton() {
 
   return (
     <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2">
+      <Link 
+        href="/profile"
+        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+      >
         {session.user.image && (
           <Image
             src={session.user.image}
@@ -35,7 +39,7 @@ export function SignButton() {
           />
         )}
         <span className="text-sm">{session.user.name}</span>
-      </div>
+      </Link>
       <Button onClick={() => signOut({ callbackUrl: "/" })} variant="outline">
         登出
       </Button>

app/components/emails/message-list.tsx

@@ -35,7 +35,7 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
   const [refreshing, setRefreshing] = useState(false)
   const [nextCursor, setNextCursor] = useState<string | null>(null)
   const [loadingMore, setLoadingMore] = useState(false)
-  const pollTimeoutRef = useRef<NodeJS.Timeout>()
+  const pollTimeoutRef = useRef<Timer>()
   const messagesRef = useRef<Message[]>([]) // 添加 ref 来追踪最新的消息列表
   const [total, setTotal] = useState(0)
 
@@ -85,7 +85,7 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
   }
 
   const startPolling = () => {
-    stopPolling() // 先清除之前的轮询
+    stopPolling()
     pollTimeoutRef.current = setInterval(() => {
       if (!refreshing && !loadingMore) {
         fetchMessages()

app/components/profile/profile-card.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { User } from "next-auth"
+import Image from "next/image"
+import { Button } from "@/components/ui/button"
+import { signOut } from "next-auth/react"
+import { Github, Mail, Settings } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { WebhookConfig } from "./webhook-config"
+
+interface ProfileCardProps {
+  user: User
+}
+
+export function ProfileCard({ user }: ProfileCardProps) {
+  const router = useRouter()
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      {/* 用户信息卡片 */}
+      <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            {user.image && (
+              <Image
+                src={user.image}
+                alt={user.name || "用户头像"}
+                width={80}
+                height={80}
+                className="rounded-full ring-2 ring-primary/20"
+              />
+            )}
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h2 className="text-xl font-bold truncate">{user.name}</h2>
+              <div className="flex items-center gap-1 text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">
+                <Github className="w-3 h-3" />
+                已关联
+              </div>
+            </div>
+            <p className="text-sm text-muted-foreground truncate mt-1">
+              {user.email}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Webhook 配置卡片 */}
+      <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Settings className="w-5 h-5 text-primary" />
+          <h2 className="text-lg font-semibold">Webhook 配置</h2>
+        </div>
+        <WebhookConfig />
+      </div>
+
+      {/* 操作按钮 */}
+      <div className="flex flex-col sm:flex-row gap-4 px-1">
+        <Button 
+          onClick={() => router.push("/moe")}
+          className="gap-2 flex-1"
+        >
+          <Mail className="w-4 h-4" />
+          返回邮箱
+        </Button>
+        <Button 
+          variant="outline" 
+          onClick={() => signOut({ callbackUrl: "/" })}
+          className="flex-1"
+        >
+          退出登录
+        </Button>
+      </div>
+    </div>
+  )
+} 

app/components/profile/webhook-config.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+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 {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+export function WebhookConfig() {
+  const [enabled, setEnabled] = useState(false)
+  const [url, setUrl] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const { toast } = useToast()
+
+  useEffect(() => {
+    fetch("/api/webhook")
+      .then(res => res.json() as Promise<{ enabled: boolean; url: string }>)
+      .then(data => {
+        setEnabled(data.enabled)
+        setUrl(data.url)
+      })
+      .catch(console.error)
+  }, [])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!url) return
+
+    setLoading(true)
+    try {
+      const res = await fetch("/api/webhook", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url, enabled })
+      })
+
+      if (!res.ok) throw new Error("Failed to save")
+
+      toast({
+        title: "保存成功",
+        description: "Webhook 配置已更新"
+      })
+    } catch (_error) {
+      toast({
+        title: "保存失败",
+        description: "请稍后重试",
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleTest = async () => {
+    if (!url) return
+
+    setTesting(true)
+    try {
+      const res = await fetch("/api/webhook/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url })
+      })
+
+      if (!res.ok) throw new Error("测试失败")
+
+      toast({
+        title: "测试成功",
+        description: "Webhook 调用成功,请检查目标服务器是否收到请求"
+      })
+    } catch (_error) {
+      toast({
+        title: "测试失败",
+        description: "请检查 URL 是否正确且可访问",
+        variant: "destructive"
+      })
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="space-y-0.5">
+          <Label>启用 Webhook</Label>
+          <div className="text-sm text-muted-foreground">
+            当收到新邮件时通知指定的 URL
+          </div>
+        </div>
+        <Switch
+          checked={enabled}
+          onCheckedChange={setEnabled}
+        />
+      </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>
+          <p className="text-xs text-muted-foreground">
+            我们会向此 URL 发送 POST 请求,包含新邮件的相关信息
+          </p>
+        </div>
+      )}
+    </form>
+  )
+} 

app/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch } 

app/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }