feat: Implement role-based access control and enhance permissions system

app/components/profile/profile-card.tsx

@@ -4,20 +4,31 @@ 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 { Github, Mail, Settings, Crown, Sword, User2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { WebhookConfig } from "./webhook-config"
+import { PromotePanel } from "./promote-panel"
+import { useRolePermission } from "@/hooks/use-role-permission"
+import { PERMISSIONS } from "@/lib/permissions"
 
 interface ProfileCardProps {
   user: User
 }
 
+const roleConfigs = {
+  emperor: { name: '皇帝', icon: Crown },
+  knight: { name: '骑士', icon: Sword },
+  civilian: { name: '平民', icon: User2 },
+} as const
+
 export function ProfileCard({ user }: ProfileCardProps) {
   const router = useRouter()
+  const { checkPermission } = useRolePermission()
+  const canManageWebhook = checkPermission(PERMISSIONS.MANAGE_WEBHOOK)
+  const canPromote = checkPermission(PERMISSIONS.PROMOTE_USER)
 
   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">
@@ -42,20 +53,40 @@ export function ProfileCard({ user }: ProfileCardProps) {
             <p className="text-sm text-muted-foreground truncate mt-1">
               {user.email}
             </p>
+            {user.roles && (
+              <div className="flex gap-2 mt-2">
+                {user.roles.map(({ name }) => {
+                  const roleConfig = roleConfigs[name as keyof typeof roleConfigs]
+                  const Icon = roleConfig.icon
+                  return (
+                    <div 
+                      key={name}
+                      className="flex items-center gap-1 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
+                      title={roleConfig.name}
+                    >
+                      <Icon className="w-3 h-3" />
+                      {roleConfig.name}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
           </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>
+      {canManageWebhook && (
+        <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>
-        <WebhookConfig />
-      </div>
+      )}
+
+      {canPromote && <PromotePanel />}
 
-      {/* 操作按钮 */}
       <div className="flex flex-col sm:flex-row gap-4 px-1">
         <Button 
           onClick={() => router.push("/moe")}

app/components/profile/promote-panel.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Sword, Search, Loader2 } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { useState } from "react"
+import { useToast } from "@/components/ui/use-toast"
+import { ROLES } from "@/lib/permissions"
+
+
+export function PromotePanel() {
+  const [email, setEmail] = useState("")
+  const [loading, setLoading] = useState(false)
+  const { toast } = useToast()
+
+  const handlePromote = async () => {
+    if (!email) return
+
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/roles/users?email=${encodeURIComponent(email)}`)
+      const data = await res.json() as { user?: { id: string; name?: string; email: string }; error?: string }
+
+      if (!res.ok) throw new Error(data.error || '未知错误')
+      if (!data.user) {
+        toast({
+          title: "未找到用户",
+          description: "请确认邮箱地址是否正确",
+          variant: "destructive"
+        })
+        return
+      }
+
+      const promoteRes = await fetch('/api/roles/promote', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId: data.user.id,
+          roleName: ROLES.KNIGHT
+        })
+      })
+
+      if (!promoteRes.ok) throw new Error('册封失败')
+
+      toast({
+        title: "册封成功",
+        description: `已将 ${data.user.email} 册封为骑士`
+      })
+      setEmail("")
+
+    } catch (error) {
+      toast({
+        title: "册封失败",
+        description: error instanceof Error ? error.message : "请稍后重试",
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Sword className="w-5 h-5 text-primary" />
+        <h2 className="text-lg font-semibold">册封骑士</h2>
+      </div>
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <Input
+            placeholder="输入用户邮箱"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={loading}
+          />
+        </div>
+        <Button 
+          onClick={handlePromote}
+          disabled={!email || loading}
+          className="gap-2"
+        >
+          {loading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <Search className="w-4 h-4" />
+          )}
+          {loading ? "册封中..." : "册封"}
+        </Button>
+      </div>
+    </div>
+  )
+}