feat: 更新用户界面，添加注销功能和绑定第三方账号选项，优化表单布局

web/src/components/auth/common/current-logged.tsx

@@ -8,23 +8,35 @@ import { useTranslations } from "next-intl";
 import { useRouter, useSearchParams } from "next/navigation";
 import React from "react";
 import { SectionDivider } from '@/components/common/section-divider';
+import { LogOut } from "lucide-react";
+import { userLogout } from "@/api/user";
+import { toast } from "sonner";
 
 export function CurrentLogged() {
   const t = useTranslations("Login");
   const router = useRouter()
   const searchParams = useSearchParams()
   const redirectBack = searchParams.get("redirect_back") || "/"
-  const { user } = useAuth();
+  const { user, logout } = useAuth();
 
   const handleLoggedContinue = () => {
     router.push(redirectBack);
   }
+
+  const handleLogOut = () => {
+    userLogout().then(() => {
+      logout();
+      toast.success(t("logout_success"));
+    })
+  }
+
   if (!user) return null;
   return (
-    <div>
+    <div className="mb-4">
       <SectionDivider className="mb-4">{t("currently_logged_in")}</SectionDivider>
-      <div onClick={handleLoggedContinue} className="cursor-pointer">
+      <div className="flex justify-evenly items-center">
-        <div className="flex gap-2 justify-center items-center">
+        <div className="flex gap-4 items-center cursor-pointer">
+          <div onClick={handleLoggedContinue} className="flex gap-2 justify-center items-center  ">
             <Avatar className="h-10 w-10 rounded-full">
               <AvatarImage src={getGravatarFromUser({ user })} alt={user.username} />
               <AvatarFallback className="rounded-full">{getFallbackAvatarFromUsername(user.nickname || user.username)}</AvatarFallback>
@@ -37,6 +49,10 @@ export function CurrentLogged() {
             </span>
           </div>
         </div>
+        <div>
+          <LogOut onClick={handleLogOut} className="text-muted-foreground cursor-pointer" />
+        </div>
+      </div>
     </div>
   )
 }

web/src/components/auth/login/login-form.tsx

@@ -25,6 +25,7 @@ import { useAuth } from "@/contexts/auth-context"
 import { registerPath, resetPasswordPath } from "@/hooks/use-route"
 import { CurrentLogged } from "@/components/auth/common/current-logged"
 import { SectionDivider } from "@/components/common/section-divider"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
 export function LoginForm({
   className,
@@ -103,9 +104,9 @@ export function LoginForm({
         </CardHeader>
         <CardContent>
           <CurrentLogged />
-          <SectionDivider className="my-4">{t("with_oidc")}</SectionDivider>
+          <SectionDivider className="mb-6">{user ? t("bind_oidc") : t("with_oidc")}</SectionDivider>
           <form>
-            <div className="grid gap-6">
+            <div className="grid gap-4">
               {/* OIDC 登录选项 */}
               {oidcConfigs.length > 0 && (
                 <div className="flex flex-col gap-4">
@@ -130,10 +131,10 @@ export function LoginForm({
               )}
               {/* 分隔线 */}
               {oidcConfigs.length > 0 && (
-                <SectionDivider className="my-0"> {t("or_continue_with_local_account")}</SectionDivider>
+                <SectionDivider className="my-2"> {t("or_continue_with_local_account")}</SectionDivider>
               )}
               {/* 邮箱密码登录 */}
-              <div className="grid gap-6">
+              <div className="grid gap-4">
                 <div className="grid gap-3">
                   <Label htmlFor="email">{t("email_or_username")}</Label>
                   <Input
@@ -211,20 +212,10 @@ function LoginWithOidc({
       asChild
     >
       <Link href={loginUrl}>
-        <Image
+        <Avatar className="h-6 w-6 rounded-full">
-          src={icon}
+          <AvatarImage src={icon} alt={displayName} />
-          alt={`${displayName} icon`}
+          <AvatarFallback className="rounded-full"></AvatarFallback>
-          width={16}
+        </Avatar>
-          height={16}
-          style={{
-            width: '16px',
-            height: '16px',
-            marginRight: '8px'
-          }}
-          onError={(e) => {
-            e.currentTarget.style.display = 'none';
-          }}
-        />
         {displayName}
       </Link>
     </Button>

web/src/components/auth/register/register-form.tsx

@@ -109,10 +109,10 @@ export function RegisterForm({
         <CardContent>
           <CurrentLogged />
           <form>
-            <div className="grid gap-6">
+            <div className="grid gap-4">
-              <SectionDivider className="mt-4">{t("register_a_new_account")}</SectionDivider>
+              <SectionDivider className="mt-0">{t("register_a_new_account")}</SectionDivider>
 
-              <div className="grid gap-6">
+              <div className="grid gap-4">
 
                 {/* 用户名 */}
                 <div className="grid gap-3">
@@ -152,17 +152,21 @@ export function RegisterForm({
                       value={email}
                       onChange={e => setEmail(e.target.value)}
                     />
-                    <Button onClick={handleSendVerifyCode} disabled={!email} variant="outline" className="border-2" type="button">
+
-                      {commonT("send_verify_code")}
-                    </Button>
                   </div>
                 </div>
                 {/* 邮箱验证码 */}
                 <div className="grid gap-3">
                   <Label htmlFor="email">{commonT("verify_code")}</Label>
+                  <div className="flex justify-between">
                     <InputOTPControlled
                       onChange={value => setVerifyCode(value)}
                     />
+                    <Button onClick={handleSendVerifyCode} disabled={!email} variant="outline" className="border-2" type="button">
+                      {commonT("send_verify_code")}
+                    </Button>
+                  </div>
+
                 </div>
                 {captchaProps &&
                   <div className="flex justify-center items-center w-full">

web/src/components/console/user-security/index.tsx

@@ -83,13 +83,14 @@ export function UserSecurityPage() {
         <Label htmlFor="email">{commonT("email")}</Label>
         <div className="flex gap-3">
           <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
-          <Button disabled={!email || email == user.email} variant="outline" className="border-2" onClick={handleSendVerifyCode}>{t("send_verify_code")}</Button>
+
         </div>
         <Label htmlFor="verify-code">{t("verify_code")}</Label>
-        <div className="flex gap-3">
+        <div className="flex justify-between">
           <InputOTPControlled onChange={(value) => setVerifyCode(value)} />
-          <Button disabled={verifyCode.length < 6} className="border-2" onClick={handleSubmitEmail}>{t("update_email")}</Button>
+          <Button disabled={!email || email == user.email} variant="outline" className="border-2" onClick={handleSendVerifyCode}>{t("send_verify_code")}</Button>
         </div>
+        <Button disabled={verifyCode.length < 6} className="border-2" onClick={handleSubmitEmail}>{t("update_email")}</Button>
       </div>
     </div>
   )

web/src/locales/zh-CN.json

@@ -128,6 +128,7 @@
     }
   },
   "Login": {
+    "bind_oidc": "绑定第三方账号",
     "captcha_error": "验证错误，请重试。",
     "continue": "继续",
     "currently_logged_in": "当前已登录为",
@@ -137,7 +138,7 @@
     "login_success": "登录成功！",
     "login_failed": "登录失败",
     "welcome": "欢迎回来",
-    "with_oidc": "使用第三方身份提供者",
+    "with_oidc": "使用第三方账号",
     "or_continue_with_local_account": "或使用用户名和密码",
     "email_or_username": "邮箱或用户名",
     "password": "密码",