feat: 新增账号设置页面并优化报表与管理端交互样式

2026-05-22 14:34:04 +08:00
parent 2ca2790f07
commit 51891548a5
8 changed files with 208 additions and 43 deletions
--- a/src/modules/account/account-settings-console.tsx
+++ b/src/modules/account/account-settings-console.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+import { putAdminMe } from "@/api/admin-auth";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useAdminProfile, useAdminSessionStore } from "@/stores/admin-session";
+import { LotteryApiBizError } from "@/types/api/errors";
+
+export function AccountSettingsConsole() {
+  const { t } = useTranslation(["common"]);
+  const adminProfile = useAdminProfile();
+  const refreshAdminProfile = useAdminSessionStore((s) => s.refreshAdminProfile);
+
+  const [nickname, setNickname] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (adminProfile) {
+      setNickname(adminProfile.nickname ?? "");
+    }
+  }, [adminProfile]);
+
+  async function handleUpdateProfile() {
+    if (!nickname.trim()) {
+      toast.error(t("validation.required", { field: t("fields.nickname", { defaultValue: "昵称" }) }));
+      return;
+    }
+    setLoading(true);
+    try {
+      await putAdminMe({ nickname: nickname.trim() });
+      toast.success(t("actions.updateSuccess", { defaultValue: "更新成功" }));
+      void refreshAdminProfile();
+    } catch (err) {
+      toast.error(err instanceof LotteryApiBizError ? err.message : t("actions.updateFailed", { defaultValue: "更新失败" }));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUpdatePassword() {
+    if (!password) {
+      toast.error(t("validation.required", { field: t("fields.newPassword", { defaultValue: "新密码" }) }));
+      return;
+    }
+    if (password !== confirmPassword) {
+      toast.error(t("validation.passwordMismatch", { defaultValue: "两次输入的密码不一致" }));
+      return;
+    }
+    setLoading(true);
+    try {
+      await putAdminMe({ password });
+      toast.success(t("actions.updateSuccess", { defaultValue: "更新成功" }));
+      setPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      toast.error(err instanceof LotteryApiBizError ? err.message : t("actions.updateFailed", { defaultValue: "更新失败" }));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-xl font-semibold tracking-tight text-[#13315f]">
+          {t("accountSettings", { defaultValue: "账号设置" })}
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          {t("accountSettingsDesc", { defaultValue: "管理您的基本账号资料及安全设置。" })}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t("profileSettings", { defaultValue: "基本资料" })}</CardTitle>
+          <CardDescription>
+            {t("profileSettingsDesc", { defaultValue: "更新您的显示名称。" })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 max-w-md">
+          <div className="space-y-1.5">
+            <Label htmlFor="nickname">{t("fields.nickname", { defaultValue: "昵称" })}</Label>
+            <Input
+              id="nickname"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
+              placeholder={t("placeholders.nickname", { defaultValue: "请输入昵称" })}
+            />
+          </div>
+          <Button onClick={handleUpdateProfile} disabled={loading}>
+            {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+            {t("actions.save", { defaultValue: "保存修改" })}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t("securitySettings", { defaultValue: "安全设置" })}</CardTitle>
+          <CardDescription>
+            {t("securitySettingsDesc", { defaultValue: "修改您的登录密码。如不修改请留空。" })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 max-w-md">
+          <div className="space-y-1.5">
+            <Label htmlFor="password">{t("fields.newPassword", { defaultValue: "新密码" })}</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder={t("placeholders.password", { defaultValue: "请输入新密码" })}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="confirm-password">{t("fields.confirmPassword", { defaultValue: "确认密码" })}</Label>
+            <Input
+              id="confirm-password"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder={t("placeholders.confirmPassword", { defaultValue: "请再次输入新密码" })}
+            />
+          </div>
+          <Button onClick={handleUpdatePassword} disabled={loading || !password}>
+            {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+            {t("actions.updatePassword", { defaultValue: "更新密码" })}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}