fix: require verification before role switch in settings

app/(account)/settings/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Camera } from "lucide-react"
+import Link from "next/link"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -11,10 +12,13 @@ import { Separator } from "@/components/ui/separator"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
 import { currentUser } from "@/lib/mock-data"
+import type { UserRole } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
 
 export default function SettingsPage() {
-  const { currentRole, switchRole } = useAuthStore()
+  const { currentRole, verifiedRoles, switchRole } = useAuthStore()
+
+  const isRoleVerified = (role: UserRole) => verifiedRoles.includes(role)
 
   return (
     <div className="max-w-2xl space-y-6">
@@ -68,22 +72,57 @@ export default function SettingsPage() {
           <CardTitle className="text-base">身份切换</CardTitle>
         </CardHeader>
         <CardContent className="space-y-3">
-          <p className="text-sm text-muted-foreground">切换身份后，导航和功能将对应变化</p>
+          <p className="text-sm text-muted-foreground">切换身份后,导航和功能将对应变化</p>
           <RadioGroup
             value={currentRole}
-            onValueChange={(v) => switchRole(v as "consumer" | "player" | "owner")}
+            onValueChange={(v) => {
+              const role = v as UserRole
+              if (isRoleVerified(role)) {
+                switchRole(role)
+              }
+            }}
           >
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center justify-between">
-              <RadioGroupItem value="consumer" id="role-consumer" />
+              <div className="flex items-center space-x-2">
-              <Label htmlFor="role-consumer">消费者</Label>
+                <RadioGroupItem value="consumer" id="role-consumer" />
+                <Label htmlFor="role-consumer">消费者</Label>
+              </div>
             </div>
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center justify-between">
-              <RadioGroupItem value="player" id="role-player" />
+              <div className="flex items-center space-x-2">
-              <Label htmlFor="role-player">打手</Label>
+                <RadioGroupItem
+                  value="player"
+                  id="role-player"
+                  disabled={!isRoleVerified("player")}
+                />
+                <Label
+                  htmlFor="role-player"
+                  className={!isRoleVerified("player") ? "text-muted-foreground" : ""}
+                >
+                  打手
+                </Label>
+              </div>
+              {!isRoleVerified("player") && (
+                <Link href="/verify" className="text-sm text-primary hover:underline">
+                  去认证
+                </Link>
+              )}
             </div>
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center justify-between">
-              <RadioGroupItem value="owner" id="role-owner" />
+              <div className="flex items-center space-x-2">
-              <Label htmlFor="role-owner">店主</Label>
+                <RadioGroupItem value="owner" id="role-owner" disabled={!isRoleVerified("owner")} />
+                <Label
+                  htmlFor="role-owner"
+                  className={!isRoleVerified("owner") ? "text-muted-foreground" : ""}
+                >
+                  店主
+                </Label>
+              </div>
+              {!isRoleVerified("owner") && (
+                <Link href="/verify" className="text-sm text-primary hover:underline">
+                  去认证
+                </Link>
+              )}
             </div>
           </RadioGroup>
         </CardContent>