@funhub/platform 0.2.30 → 0.2.31

package/dist/components/pages/settings/_components/reset-password-drawer.mjs

@@ -1,2 +1,382 @@
 
-"use client";import{hashPassword as e}from"../../../../utils/common.mjs";import{cn as t}from"../../../../utils/cn.mjs";import{useUserStore as n}from"../../../../store/modules/user-store.mjs";import{pUserResetPassword as r,pUserSendResetPasswordEmailCode as i,pUserVerifyResetPasswordEmailCode as ee}from"../../../../service/generated/client.mjs";import{getPasswordValidationErrorText as te,validatePasswordPair as ne}from"../../../../utils/password-validator.mjs";import{Button as a}from"../../../ui/button.mjs";import{Box as o}from"../../../ui/box.mjs";import{Drawer as re,DrawerContent as ie,DrawerDescription as ae,DrawerHeader as s,DrawerTitle as c}from"../../../ui/drawer.mjs";import{Text as l}from"../../../ui/text.mjs";import u from"../../../ui/legacy/button.mjs";import{HeaderNav as oe}from"../../../common/header-nav/client.mjs";import{EyeIcon as d}from"../../../../assets/icons/eye-icon.mjs";import{EyeOffIcon as f}from"../../../../assets/icons/eye-off-icon.mjs";import p from"../../../ui/legacy/input.mjs";import{toast as m}from"sonner";import{useEffect as h,useMemo as g,useRef as _,useState as v}from"react";import{jsx as y,jsxs as b}from"react/jsx-runtime";import{useTranslations as se}from"next-intl";function x(e){let[t,n]=e.split(`@`);return!t||!n?e:`${t.slice(0,3)}***${t.length>3?t.slice(-1):``}@${n}`}function S(S){let C=se(`components.pages.settings.components`),{open:ce,onOpenChange:w}=S,T=n(e=>e.userInfo),[E,D]=v([,,,,,,].fill(``)),[O,k]=v(0),A=_(null),j=E.includes(``),[M,N]=v(``),P=_(null),[le,F]=v(60),[I,L]=v(!1),R=g(()=>x(T?.email||``),[T?.email]);async function z(){if(I)return;let e=m.loading(C(`resetPasswordDrawer.sending`));try{let t=await i({user_id:T?.user_id});t.code===0?(m.success(C(`resetPasswordDrawer.codeSentSuccess`),{id:e}),L(!0),F(60),N(``)):m.error(t.message||C(`resetPasswordDrawer.sendFailed`),{id:e})}catch(t){console.error(t),m.error(C(`resetPasswordDrawer.sendFailed`),{id:e})}}function B(){U(e=>e===1?e:e+1)}async function V(){let e=m.loading(C(`resetPasswordDrawer.verifying`));try{N(``);let t=await ee({user_id:T?.user_id,email_code:E.join(``)});t.code===0?(m.success(C(`resetPasswordDrawer.verifySuccess`),{id:e}),B()):(N(t.message||C(`resetPasswordDrawer.verifyFailed`)),m.error(t.message||C(`resetPasswordDrawer.verifyFailed`),{id:e}))}catch(t){console.error(t),N(C(`resetPasswordDrawer.verifyFailed`)),m.error(C(`resetPasswordDrawer.verifyFailed`),{id:e})}}h(()=>{if(I)return P.current=setInterval(()=>{F(e=>e<=1?(P.current&&clearInterval(P.current),L(!1),60):e-1)},1e3),()=>{P.current&&clearInterval(P.current)}},[I]);let[H,U]=v(0);h(()=>{H===0&&A.current?.focus()},[H]);let[W,G]=v({password:``,confirmPassword:``}),[K,q]=v(!1),[J,Y]=v(!1),[X,ue]=v(!1),Z=g(()=>ne(W.password,W.confirmPassword),[W.password,W.confirmPassword]),Q=g(()=>te(Z),[Z]),$=g(()=>K||W.password.length===0||W.confirmPassword.length===0||Z.type!==`none`,[K,W.password.length,W.confirmPassword.length,Z.type]);async function de(){if($)return;let t=m.loading(C(`resetPasswordDrawer.submitting`));try{q(!0);let n=await r({user_id:T?.user_id,password:e(W.password)});n.code===0?(m.success(C(`resetPasswordDrawer.passwordResetSuccess`),{id:t}),G({password:``,confirmPassword:``}),D([,,,,,,].fill(``)),k(0),w(!1)):m.error(n.message||C(`resetPasswordDrawer.resetFailed`),{id:t})}catch(e){console.error(e),m.error(C(`resetPasswordDrawer.resetFailed`),{id:t})}finally{q(!1)}}function fe(e){let t=e.target.value.replace(/\D/g,``);if(t.length===0)return;let n=[...E],r=t.split(``),i=O;for(let e of r){if(i>=6)break;n[i]=e,i+=1}D(n),k(Math.min(i,5)),M&&N(``)}function pe(e){if(e.key===`Backspace`){e.preventDefault();let t=[...E];t[O]?t[O]=``:O>0&&(t[O-1]=``,k(O-1)),D(t),M&&N(``);return}e.key===`ArrowLeft`&&O>0&&k(O-1),e.key===`ArrowRight`&&O<5&&k(O+1)}function me(e){k(e),A.current?.focus()}let he=b(o,{className:`p-6 grow bg-[var(--color-surface-panel-dark)]`,children:[b(o,{className:`space-y-[12px]`,children:[y(l,{className:`text-[24px] leading-[32px] font-bold text-text1`,children:C(`resetPasswordDrawer.verifyTitle`)}),y(o,{className:`flex items-center justify-between gap-[8px]`,children:b(l,{className:`min-w-0 flex-1 truncate text-[12px] leading-[16px] text-text2`,children:[C(`resetPasswordDrawer.boundEmailNotice`),y(l,{className:`dark:text-white text-white`,children:R}),C(`resetPasswordDrawer.verifyHint`)]})})]}),b(o,{className:`mt-[28px]`,children:[b(o,{className:`relative`,children:[y(`input`,{ref:A,type:`text`,inputMode:`numeric`,pattern:`[0-9]*`,value:``,onChange:fe,onKeyDown:pe,className:`absolute inset-0 h-full w-full opacity-0 pointer-events-none caret-transparent`,autoComplete:`one-time-code`}),y(o,{className:`flex justify-between gap-[10px]`,children:E.map((e,n)=>y(o,{onClick:()=>me(n),className:t(`flex h-[48px] flex-1 cursor-pointer items-center justify-center rounded-[6px] transition-all duration-200`,M?`border-[0.5px] border-[var(--color-verification-error)] bg-white/10`:t(`border-2`,n===O?`border-theme3 bg-theme3/10`:`border-transparent bg-line1`)),children:y(l,{className:t(`select-none text-[24px] font-semibold leading-none`,M?`text-[var(--color-verification-error)]`:`text-text1`),children:e})},`${n}-${e||`empty`}`))})]}),y(o,{className:`min-h-[22px] pt-[8px]`,children:y(l,{className:`text-[14px] leading-[24px] text-[var(--color-verification-error)]`,children:M})}),y(u,{type:`button`,onClick:V,disabled:j,className:`mt-[44px] h-[48px] w-full !rounded-[8px] !border-0 !px-0 !py-0 text-[16px] font-normal leading-[24px] text-white disabled:opacity-100 active:opacity-90 ${j?`!text-white/60`:``}`,style:{background:j?`linear-gradient(90deg, rgba(151, 86, 227, 0.45) 0%, rgba(108, 67, 238, 0.45) 100%)`:`var(--gradient-action-button)`},children:`提交`}),I?y(o,{className:`mt-[16px] w-full text-center text-[15px] leading-[24px] text-[#9DA3AC]`,children:C(`resetPasswordDrawer.resendCountdown`,{seconds:le})}):y(a,{variant:`link`,onClick:z,className:`mt-[16px] h-auto w-full justify-center !rounded-none bg-transparent !px-0 !py-0 text-[14px] leading-[24px] font-medium no-underline hover:no-underline`,style:{backgroundImage:`var(--gradient-action-button)`,backgroundClip:`text`,WebkitBackgroundClip:`text`,color:`transparent`},children:C(`resetPasswordDrawer.sendCode`)})]})]}),ge=b(o,{className:`flex min-h-0 grow flex-col bg-[var(--color-surface-panel-dark)]`,children:[b(o,{className:`px-[32px] pt-[15px]`,children:[y(l,{className:`text-[16px] leading-[20px] text-text1`,children:C(`resetPasswordDrawer.setNewPasswordHint`)}),b(o,{className:`mt-[16px]`,children:[b(o,{className:`relative flex h-[48px] items-center rounded-[8px] border bg-white/10 px-[16px] ${Q?`border-theme5`:`border-transparent`}`,children:[y(p,{value:W.password,onChange:e=>G(t=>({...t,password:e})),placeholder:C(`resetPasswordDrawer.passwordPlaceholder`),type:J?`text`:`password`,autoComplete:`new-password`,autoCorrect:`off`,autoCapitalize:`none`,spellCheck:!1,"data-lpignore":`true`,"data-1p-ignore":`true`,"data-form-type":`other`,className:`rounded-none bg-transparent !px-0 !py-0 text-[14px] leading-[20px] text-text1 placeholder:text-white/60`}),y(`button`,{type:`button`,onClick:()=>Y(!J),className:`absolute right-[16px] top-1/2 -translate-y-1/2 text-white/50 transition-colors hover:text-white/80`,children:y(J?d:f,{className:`h-[24px] w-[24px]`})})]}),b(o,{className:`mt-[16px] relative flex h-[48px] items-center rounded-[8px] border bg-white/10 px-[16px] ${Z.type===`not-match`?`border-theme5`:`border-transparent`}`,children:[y(p,{value:W.confirmPassword,onChange:e=>G(t=>({...t,confirmPassword:e})),placeholder:C(`resetPasswordDrawer.confirmPasswordPlaceholder`),type:X?`text`:`password`,autoComplete:`new-password`,autoCorrect:`off`,autoCapitalize:`none`,spellCheck:!1,"data-lpignore":`true`,"data-1p-ignore":`true`,"data-form-type":`other`,className:`rounded-none bg-transparent !px-0 !py-0  text-[14px] leading-[20px] text-text1 placeholder:text-white/60`}),y(`button`,{type:`button`,onClick:()=>ue(!X),className:`absolute right-[16px] top-1/2 -translate-y-1/2 text-white/50 transition-colors hover:text-white/80`,children:y(X?d:f,{className:`h-[24px] w-[24px]`})})]}),Q?y(o,{className:`mt-[12px]`,children:y(l,{className:`text-[12px] leading-[16px] text-theme5`,children:Q})}):null]})]}),y(o,{className:`mt-auto bg-[rgba(5,1,15,0.9)] px-[16px] pt-[8px] pb-[calc(env(safe-area-inset-bottom)+8px)] backdrop-blur-[4px]`,children:y(u,{onClick:de,disabled:$,className:`h-[48px] w-full rounded-[8px] bg-[linear-gradient(90deg,#A656E3_10%,#6C43EE_100%)] px-0 py-0 text-[16px] leading-[24px] font-normal text-white disabled:bg-[linear-gradient(90deg,rgba(166,86,227,0.45)_10%,rgba(108,67,238,0.45)_100%)] disabled:text-white/60 active:opacity-90`,children:C(K?`resetPasswordDrawer.submitting`:`resetPasswordDrawer.resetPassword`)})})]});return b(re,{open:ce,onOpenChange:w,direction:`right`,handleOnly:!0,children:[b(s,{className:`hidden`,children:[y(c,{children:C(`resetPasswordDrawer.title`)}),y(ae,{children:C(`resetPasswordDrawer.title`)})]}),b(ie,{className:`!w-full`,children:[y(oe,{className:`!bg-[var(--color-surface-panel-dark)] !border-transparent`,onBack:()=>w(!1)}),H===0&&he,H===1&&ge]})]})}export{S as ResetPasswordDrawer};
+'use client';
+
+import { hashPassword } from "../../../../utils/common.mjs";
+import { cn } from "../../../../utils/cn.mjs";
+import { useUserStore } from "../../../../store/modules/user-store.mjs";
+import { pUserResetPassword, pUserSendResetPasswordEmailCode, pUserVerifyResetPasswordEmailCode } from "../../../../service/generated/client.mjs";
+import { getPasswordValidationErrorText, validatePasswordPair } from "../../../../utils/password-validator.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "../../../ui/drawer.mjs";
+import { Text } from "../../../ui/text.mjs";
+import Button$1 from "../../../ui/legacy/button.mjs";
+import { HeaderNav } from "../../../common/header-nav/client.mjs";
+import { EyeIcon } from "../../../../assets/icons/eye-icon.mjs";
+import { EyeOffIcon } from "../../../../assets/icons/eye-off-icon.mjs";
+import Input from "../../../ui/legacy/input.mjs";
+import { toast } from "sonner";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/settings/_components/reset-password-drawer.tsx
+const CODE_LENGTH = 6;
+/**
+* 掩码邮箱显示。
+*/
+function maskEmail(email) {
+	const [local, domain] = email.split("@");
+	if (!local || !domain) return email;
+	return `${local.slice(0, 3)}***${local.length > 3 ? local.slice(-1) : ""}@${domain}`;
+}
+function ResetPasswordDrawer(props) {
+	const t = useTranslations("components.pages.settings.components");
+	const { open, onOpenChange } = props;
+	const userInfo = useUserStore((state) => state.userInfo);
+	const [code, setCode] = useState(new Array(CODE_LENGTH).fill(""));
+	const [activeIndex, setActiveIndex] = useState(0);
+	const codeInputRef = useRef(null);
+	const disabledValidEmail = code.includes("");
+	const [verifyErrorText, setVerifyErrorText] = useState("");
+	const sendCodeTimerRef = useRef(null);
+	const [sendCodeTimes, setSendCodeTimes] = useState(60);
+	const [isSendingCode, setIsSendingCode] = useState(false);
+	const maskedEmail = useMemo(() => maskEmail(userInfo?.email || ""), [userInfo?.email]);
+	async function handleSendCode() {
+		if (isSendingCode) return;
+		const loadingId = toast.loading(t("resetPasswordDrawer.sending"));
+		try {
+			const res = await pUserSendResetPasswordEmailCode({ user_id: userInfo?.user_id });
+			if (res.code === 0) {
+				toast.success(t("resetPasswordDrawer.codeSentSuccess"), { id: loadingId });
+				setIsSendingCode(true);
+				setSendCodeTimes(60);
+				setVerifyErrorText("");
+			} else toast.error(res.message || t("resetPasswordDrawer.sendFailed"), { id: loadingId });
+		} catch (error) {
+			console.error(error);
+			toast.error(t("resetPasswordDrawer.sendFailed"), { id: loadingId });
+		}
+	}
+	function nextStep() {
+		setSteps((prev) => {
+			if (prev !== 1) return prev + 1;
+			return prev;
+		});
+	}
+	async function handleValid() {
+		const loadingId = toast.loading(t("resetPasswordDrawer.verifying"));
+		try {
+			setVerifyErrorText("");
+			const res = await pUserVerifyResetPasswordEmailCode({
+				user_id: userInfo?.user_id,
+				email_code: code.join("")
+			});
+			if (res.code === 0) {
+				toast.success(t("resetPasswordDrawer.verifySuccess"), { id: loadingId });
+				nextStep();
+			} else {
+				setVerifyErrorText(res.message || t("resetPasswordDrawer.verifyFailed"));
+				toast.error(res.message || t("resetPasswordDrawer.verifyFailed"), { id: loadingId });
+			}
+		} catch (error) {
+			console.error(error);
+			setVerifyErrorText(t("resetPasswordDrawer.verifyFailed"));
+			toast.error(t("resetPasswordDrawer.verifyFailed"), { id: loadingId });
+		}
+	}
+	useEffect(() => {
+		if (!isSendingCode) return;
+		sendCodeTimerRef.current = setInterval(() => {
+			setSendCodeTimes((prev) => {
+				if (prev <= 1) {
+					if (sendCodeTimerRef.current) clearInterval(sendCodeTimerRef.current);
+					setIsSendingCode(false);
+					return 60;
+				}
+				return prev - 1;
+			});
+		}, 1e3);
+		return () => {
+			if (sendCodeTimerRef.current) clearInterval(sendCodeTimerRef.current);
+		};
+	}, [isSendingCode]);
+	const [steps, setSteps] = useState(0);
+	useEffect(() => {
+		if (steps !== 0) return;
+		codeInputRef.current?.focus();
+	}, [steps]);
+	const [resetForm, setResetForm] = useState({
+		password: "",
+		confirmPassword: ""
+	});
+	const [isResetting, setIsResetting] = useState(false);
+	const [showPassword, setShowPassword] = useState(false);
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+	const validationResult = useMemo(() => {
+		return validatePasswordPair(resetForm.password, resetForm.confirmPassword);
+	}, [resetForm.password, resetForm.confirmPassword]);
+	const resetValidationError = useMemo(() => getPasswordValidationErrorText(validationResult), [validationResult]);
+	const disabledHandleReset = useMemo(() => {
+		return isResetting || resetForm.password.length === 0 || resetForm.confirmPassword.length === 0 || validationResult.type !== "none";
+	}, [
+		isResetting,
+		resetForm.password.length,
+		resetForm.confirmPassword.length,
+		validationResult.type
+	]);
+	async function handleReset() {
+		if (disabledHandleReset) return;
+		const loadingId = toast.loading(t("resetPasswordDrawer.submitting"));
+		try {
+			setIsResetting(true);
+			const res = await pUserResetPassword({
+				user_id: userInfo?.user_id,
+				password: hashPassword(resetForm.password)
+			});
+			if (res.code === 0) {
+				toast.success(t("resetPasswordDrawer.passwordResetSuccess"), { id: loadingId });
+				setResetForm({
+					password: "",
+					confirmPassword: ""
+				});
+				setCode(new Array(CODE_LENGTH).fill(""));
+				setActiveIndex(0);
+				onOpenChange(false);
+			} else toast.error(res.message || t("resetPasswordDrawer.resetFailed"), { id: loadingId });
+		} catch (error) {
+			console.error(error);
+			toast.error(t("resetPasswordDrawer.resetFailed"), { id: loadingId });
+		} finally {
+			setIsResetting(false);
+		}
+	}
+	/**
+	* 处理验证码输入变化。
+	*/
+	function handleCodeInputChange(event) {
+		const value = event.target.value.replace(/\D/g, "");
+		if (value.length === 0) return;
+		const nextCode = [...code];
+		const digits = value.split("");
+		let nextIndex = activeIndex;
+		for (const digit of digits) {
+			if (nextIndex >= CODE_LENGTH) break;
+			nextCode[nextIndex] = digit;
+			nextIndex += 1;
+		}
+		setCode(nextCode);
+		setActiveIndex(Math.min(nextIndex, CODE_LENGTH - 1));
+		if (verifyErrorText) setVerifyErrorText("");
+	}
+	/**
+	* 处理验证码键盘事件。
+	*/
+	function handleCodeKeyDown(event) {
+		if (event.key === "Backspace") {
+			event.preventDefault();
+			const nextCode = [...code];
+			if (nextCode[activeIndex]) nextCode[activeIndex] = "";
+			else if (activeIndex > 0) {
+				nextCode[activeIndex - 1] = "";
+				setActiveIndex(activeIndex - 1);
+			}
+			setCode(nextCode);
+			if (verifyErrorText) setVerifyErrorText("");
+			return;
+		}
+		if (event.key === "ArrowLeft" && activeIndex > 0) setActiveIndex(activeIndex - 1);
+		if (event.key === "ArrowRight" && activeIndex < CODE_LENGTH - 1) setActiveIndex(activeIndex + 1);
+	}
+	/**
+	* 点击验证码格子后聚焦对应位置。
+	*/
+	function handleCodeBoxClick(index) {
+		setActiveIndex(index);
+		codeInputRef.current?.focus();
+	}
+	const validFormContent = /* @__PURE__ */ jsxs(Box, {
+		className: "p-6 grow bg-[var(--color-surface-panel-dark)]",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: "space-y-[12px]",
+			children: [/* @__PURE__ */ jsx(Text, {
+				className: "text-[24px] leading-[32px] font-bold text-text1",
+				children: t("resetPasswordDrawer.verifyTitle")
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "flex items-center justify-between gap-[8px]",
+				children: /* @__PURE__ */ jsxs(Text, {
+					className: "min-w-0 flex-1 truncate text-[12px] leading-[16px] text-text2",
+					children: [
+						t("resetPasswordDrawer.boundEmailNotice"),
+						/* @__PURE__ */ jsx(Text, {
+							className: "dark:text-white text-white",
+							children: maskedEmail
+						}),
+						t("resetPasswordDrawer.verifyHint")
+					]
+				})
+			})]
+		}), /* @__PURE__ */ jsxs(Box, {
+			className: "mt-[28px]",
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx("input", {
+						ref: codeInputRef,
+						type: "text",
+						inputMode: "numeric",
+						pattern: "[0-9]*",
+						value: "",
+						onChange: handleCodeInputChange,
+						onKeyDown: handleCodeKeyDown,
+						className: "absolute inset-0 h-full w-full opacity-0 pointer-events-none caret-transparent",
+						autoComplete: "one-time-code"
+					}), /* @__PURE__ */ jsx(Box, {
+						className: "flex justify-between gap-[10px]",
+						children: code.map((digit, index) => /* @__PURE__ */ jsx(Box, {
+							onClick: () => handleCodeBoxClick(index),
+							className: cn("flex h-[48px] flex-1 cursor-pointer items-center justify-center rounded-[6px] transition-all duration-200", verifyErrorText ? "border-[0.5px] border-[var(--color-verification-error)] bg-white/10" : cn("border-2", index === activeIndex ? "border-theme3 bg-theme3/10" : "border-transparent bg-line1")),
+							children: /* @__PURE__ */ jsx(Text, {
+								className: cn("select-none text-[24px] font-semibold leading-none", verifyErrorText ? "text-[var(--color-verification-error)]" : "text-text1"),
+								children: digit
+							})
+						}, `${index}-${digit || "empty"}`))
+					})]
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					className: "min-h-[22px] pt-[8px]",
+					children: /* @__PURE__ */ jsx(Text, {
+						className: "text-[14px] leading-[24px] text-[var(--color-verification-error)]",
+						children: verifyErrorText
+					})
+				}),
+				/* @__PURE__ */ jsx(Button$1, {
+					type: "button",
+					onClick: handleValid,
+					disabled: disabledValidEmail,
+					className: `mt-[44px] h-[48px] w-full !rounded-[8px] !border-0 !px-0 !py-0 text-[16px] font-normal leading-[24px] text-white disabled:opacity-100 active:opacity-90 ${!disabledValidEmail ? "" : "!text-white/60"}`,
+					style: { background: !disabledValidEmail ? "var(--gradient-action-button)" : "linear-gradient(90deg, rgba(151, 86, 227, 0.45) 0%, rgba(108, 67, 238, 0.45) 100%)" },
+					children: "提交"
+				}),
+				isSendingCode ? /* @__PURE__ */ jsx(Box, {
+					className: "mt-[16px] w-full text-center text-[15px] leading-[24px] text-[#9DA3AC]",
+					children: t("resetPasswordDrawer.resendCountdown", { seconds: sendCodeTimes })
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: "link",
+					onClick: handleSendCode,
+					className: "mt-[16px] h-auto w-full justify-center !rounded-none bg-transparent !px-0 !py-0 text-[14px] leading-[24px] font-medium no-underline hover:no-underline",
+					style: {
+						backgroundImage: "var(--gradient-action-button)",
+						backgroundClip: "text",
+						WebkitBackgroundClip: "text",
+						color: "transparent"
+					},
+					children: t("resetPasswordDrawer.sendCode")
+				})
+			]
+		})]
+	});
+	const resetFormContent = /* @__PURE__ */ jsxs(Box, {
+		className: "flex min-h-0 grow flex-col bg-[var(--color-surface-panel-dark)]",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: "px-[32px] pt-[15px]",
+			children: [/* @__PURE__ */ jsx(Text, {
+				className: "text-[16px] leading-[20px] text-text1",
+				children: t("resetPasswordDrawer.setNewPasswordHint")
+			}), /* @__PURE__ */ jsxs(Box, {
+				className: "mt-[16px]",
+				children: [
+					/* @__PURE__ */ jsxs(Box, {
+						className: `relative flex h-[48px] items-center rounded-[8px] border bg-white/10 px-[16px] ${resetValidationError ? "border-theme5" : "border-transparent"}`,
+						children: [/* @__PURE__ */ jsx(Input, {
+							value: resetForm.password,
+							onChange: (val) => setResetForm((prev) => ({
+								...prev,
+								password: val
+							})),
+							placeholder: t("resetPasswordDrawer.passwordPlaceholder"),
+							type: showPassword ? "text" : "password",
+							autoComplete: "new-password",
+							autoCorrect: "off",
+							autoCapitalize: "none",
+							spellCheck: false,
+							"data-lpignore": "true",
+							"data-1p-ignore": "true",
+							"data-form-type": "other",
+							className: "rounded-none bg-transparent !px-0 !py-0 text-[14px] leading-[20px] text-text1 placeholder:text-white/60"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setShowPassword(!showPassword),
+							className: "absolute right-[16px] top-1/2 -translate-y-1/2 text-white/50 transition-colors hover:text-white/80",
+							children: showPassword ? /* @__PURE__ */ jsx(EyeIcon, { className: "h-[24px] w-[24px]" }) : /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-[24px] w-[24px]" })
+						})]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						className: `mt-[16px] relative flex h-[48px] items-center rounded-[8px] border bg-white/10 px-[16px] ${validationResult.type === "not-match" ? "border-theme5" : "border-transparent"}`,
+						children: [/* @__PURE__ */ jsx(Input, {
+							value: resetForm.confirmPassword,
+							onChange: (val) => setResetForm((prev) => ({
+								...prev,
+								confirmPassword: val
+							})),
+							placeholder: t("resetPasswordDrawer.confirmPasswordPlaceholder"),
+							type: showConfirmPassword ? "text" : "password",
+							autoComplete: "new-password",
+							autoCorrect: "off",
+							autoCapitalize: "none",
+							spellCheck: false,
+							"data-lpignore": "true",
+							"data-1p-ignore": "true",
+							"data-form-type": "other",
+							className: "rounded-none bg-transparent !px-0 !py-0  text-[14px] leading-[20px] text-text1 placeholder:text-white/60"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setShowConfirmPassword(!showConfirmPassword),
+							className: "absolute right-[16px] top-1/2 -translate-y-1/2 text-white/50 transition-colors hover:text-white/80",
+							children: showConfirmPassword ? /* @__PURE__ */ jsx(EyeIcon, { className: "h-[24px] w-[24px]" }) : /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-[24px] w-[24px]" })
+						})]
+					}),
+					resetValidationError ? /* @__PURE__ */ jsx(Box, {
+						className: "mt-[12px]",
+						children: /* @__PURE__ */ jsx(Text, {
+							className: "text-[12px] leading-[16px] text-theme5",
+							children: resetValidationError
+						})
+					}) : null
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Box, {
+			className: "mt-auto bg-[rgba(5,1,15,0.9)] px-[16px] pt-[8px] pb-[calc(env(safe-area-inset-bottom)+8px)] backdrop-blur-[4px]",
+			children: /* @__PURE__ */ jsx(Button$1, {
+				onClick: handleReset,
+				disabled: disabledHandleReset,
+				className: "h-[48px] w-full rounded-[8px] bg-[linear-gradient(90deg,#A656E3_10%,#6C43EE_100%)] px-0 py-0 text-[16px] leading-[24px] font-normal text-white disabled:bg-[linear-gradient(90deg,rgba(166,86,227,0.45)_10%,rgba(108,67,238,0.45)_100%)] disabled:text-white/60 active:opacity-90",
+				children: isResetting ? t("resetPasswordDrawer.submitting") : t("resetPasswordDrawer.resetPassword")
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Drawer, {
+		open,
+		onOpenChange,
+		direction: "right",
+		handleOnly: true,
+		children: [/* @__PURE__ */ jsxs(DrawerHeader, {
+			className: "hidden",
+			children: [/* @__PURE__ */ jsx(DrawerTitle, { children: t("resetPasswordDrawer.title") }), /* @__PURE__ */ jsx(DrawerDescription, { children: t("resetPasswordDrawer.title") })]
+		}), /* @__PURE__ */ jsxs(DrawerContent, {
+			className: "!w-full",
+			children: [
+				/* @__PURE__ */ jsx(HeaderNav, {
+					className: "!bg-[var(--color-surface-panel-dark)] !border-transparent",
+					onBack: () => onOpenChange(false)
+				}),
+				steps === 0 && validFormContent,
+				steps === 1 && resetFormContent
+			]
+		})]
+	});
+}
+
+//#endregion
+export { ResetPasswordDrawer };

package/dist/components/pages/settings/_components/settings.mjs

@@ -1,2 +1,193 @@
 
-"use client";import{cn as e}from"../../../../utils/cn.mjs";import{useUserStore as t}from"../../../../store/modules/user-store.mjs";import{gUserGetUserPrivacySettings as n}from"../../../../service/generated/client.mjs";import{Box as r}from"../../../ui/box.mjs";import{useLoginModalStore as i}from"../../../../store/modules/login-modal-store.mjs";import{useDeleteRequest as a,useRequest as o}from"../../../../hooks/query/use-query.mjs";import{locales as s}from"../../../../i18n.mjs";import{DeleteConfirmDialog as c}from"../../../common/delete-confirm-dialog/delete-confirm-dialog.mjs";import{HeaderNav as l}from"../../../common/header-nav/client.mjs";import{ResetPasswordDrawer as u}from"./reset-password-drawer.mjs";import{useEffect as d,useRef as f,useState as p}from"react";import{useRouter as m}from"next/navigation";import{ChevronRight as h}from"lucide-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useLocale as v,useTranslations as y}from"next-intl";import b from"next/link";function x(e){return{collection:Number(e?.collections_open??0)>0,follower:Number(e?.follower_open??0)>0,following:Number(e?.following_open??0)>0,like:Number(e?.like_open??0)>0}}function S({className:h}={}){let S=y(`components.pages.settings.components`),w=v(),{open:T}=i(),E=t(e=>e.isLogin),D=t(e=>e.token),O=t(e=>e.logout),k=t(e=>e.userId),A=(E||!!D)&&!!k,j=x(),[M,N]=p(j),P=f(j),[F,I]=p(!1),[L,R]=p(!1);a();let z=[`user-privacy-settings`,k],B=w===`zh-CN`?`en`:`zh-CN`;s.find(e=>e.code===B)?.name;let{data:V}=o(z,()=>n({user_id:k}),{enabled:!!k}),H=V?.data;d(()=>{if(!H)return;let e=x(H);N(e),P.current=e},[H]),d(()=>{P.current=M},[M]);let U=a(),W=m();function G(){U([`user-profile`,`mine`]),O(),W.push(`/user/mine`)}function K(e){R(e)}function q(){R(!0)}function J(){R(!1)}function Y(){G()}function X(e){I(e)}function Z(){if(!A){T();return}I(!0)}function Q(e){A||(e.preventDefault(),e.stopPropagation(),T())}return _(r,{className:e(`min-h-dvh bg-[var(--color-surface-panel-dark)]`,h),children:[g(l,{className:`!bg-[var(--color-surface-panel-dark)] !border-transparent`,title:S(`settings.title`)}),g(u,{open:F,onOpenChange:X}),_(r,{className:`mx-4 mt-4 flex flex-col`,children:[g(`button`,{type:`button`,className:`block w-full text-left`,onClick:Z,children:g(C,{title:S(`settings.resetPasswordTitle`)})}),g(b,{href:`/feedback`,onClick:Q,className:`block`,children:g(C,{title:S(`settings.feedbackTitle`)})})]}),F||!A?null:g(r,{className:`fixed inset-x-0 bottom-0 z-40 flex flex-col pb-[env(safe-area-inset-bottom)]`,children:g(`div`,{className:`flex flex-col items-center px-4 py-2`,style:{background:`var(--color-overlay-panel-fade-start90)`,backdropFilter:`blur(var(--effect-backdrop-blur-detail-hero))`},children:g(`button`,{type:`button`,className:`flex h-12 w-full items-center justify-center rounded-[8px] text-base text-[var(--color-text-primary)] transition-opacity active:opacity-80`,style:{background:`var(--color-surface-white10)`},onClick:q,children:S(`settings.button`)})})}),g(c,{open:L,onOpenChange:K,onCancel:J,onConfirm:Y,title:``,description:S(`settings.logoutConfirmMessage`),confirmText:S(`settings.confirm`),cancelText:S(`settings.cancel`)})]})}function C({title:e}){return _(`div`,{className:`flex h-14 items-center justify-between px-4`,children:[g(`span`,{className:`text-base text-[var(--color-text-primary)]`,children:e}),g(h,{className:`size-6 shrink-0 opacity-50 text-[var(--color-text-primary)]`})]})}export{S as Settings};
+'use client';
+
+import { cn } from "../../../../utils/cn.mjs";
+import { useUserStore } from "../../../../store/modules/user-store.mjs";
+import { gUserGetUserPrivacySettings } from "../../../../service/generated/client.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { useLoginModalStore } from "../../../../store/modules/login-modal-store.mjs";
+import { useDeleteRequest, useRequest } from "../../../../hooks/query/use-query.mjs";
+import { locales } from "../../../../i18n.mjs";
+import { DeleteConfirmDialog } from "../../../common/delete-confirm-dialog/delete-confirm-dialog.mjs";
+import { HeaderNav } from "../../../common/header-nav/client.mjs";
+import { ResetPasswordDrawer } from "./reset-password-drawer.mjs";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+
+//#region components/pages/settings/_components/settings.tsx
+/**
+* 将接口返回的隐私设置转换为前端状态。
+*/
+function normalizePrivacySettings(settings) {
+	return {
+		collection: Number(settings?.collections_open ?? 0) > 0,
+		follower: Number(settings?.follower_open ?? 0) > 0,
+		following: Number(settings?.following_open ?? 0) > 0,
+		like: Number(settings?.like_open ?? 0) > 0
+	};
+}
+/**
+* 设置页：隐私设置与账户操作。
+*/
+function Settings({ className } = {}) {
+	const t = useTranslations("components.pages.settings.components");
+	const locale = useLocale();
+	const { open: openLoginModal } = useLoginModalStore();
+	const isLogin = useUserStore((state) => state.isLogin);
+	const token = useUserStore((state) => state.token);
+	const logout = useUserStore((state) => state.logout);
+	const userId = useUserStore((state) => state.userId);
+	const isAuthenticated = (isLogin || !!token) && Boolean(userId);
+	const initialPrivacy = normalizePrivacySettings();
+	const [privacy, setPrivacy] = useState(initialPrivacy);
+	const privacyRef = useRef(initialPrivacy);
+	const [open, setOpen] = useState(false);
+	const [logoutConfirmOpen, setLogoutConfirmOpen] = useState(false);
+	useDeleteRequest();
+	const privacyRequestKey = ["user-privacy-settings", userId];
+	const nextLocaleCode = locale === "zh-CN" ? "en" : "zh-CN";
+	locales.find((item) => item.code === nextLocaleCode)?.name;
+	const { data: privacyResponse } = useRequest(privacyRequestKey, () => gUserGetUserPrivacySettings({ user_id: userId }), { enabled: !!userId });
+	const remotePrivacySettings = privacyResponse?.data;
+	useEffect(() => {
+		if (!remotePrivacySettings) return;
+		const normalized = normalizePrivacySettings(remotePrivacySettings);
+		setPrivacy(normalized);
+		privacyRef.current = normalized;
+	}, [remotePrivacySettings]);
+	useEffect(() => {
+		privacyRef.current = privacy;
+	}, [privacy]);
+	const invalidateRequest = useDeleteRequest();
+	const router = useRouter();
+	/**
+	* 退出登录并返回个人中心。
+	*/
+	function handleLogout() {
+		invalidateRequest(["user-profile", "mine"]);
+		logout();
+		router.push("/user/mine");
+	}
+	/**
+	* 退出登录确认弹窗开关。
+	*/
+	function handleLogoutConfirmOpenChange(val) {
+		setLogoutConfirmOpen(val);
+	}
+	/**
+	* 打开退出登录确认弹窗。
+	*/
+	function handleOpenLogoutConfirm() {
+		setLogoutConfirmOpen(true);
+	}
+	/**
+	* 取消退出登录。
+	*/
+	function handleCancelLogoutConfirm() {
+		setLogoutConfirmOpen(false);
+	}
+	/**
+	* 确认退出登录。
+	*/
+	function handleConfirmLogout() {
+		handleLogout();
+	}
+	/**
+	* 重置密码弹窗开关。
+	*/
+	function handleResetPasswordDrawerOpenChange(val) {
+		setOpen(val);
+	}
+	/**
+	* 打开重置密码弹窗。
+	*/
+	function handleOpenResetPasswordDrawer() {
+		if (!isAuthenticated) {
+			openLoginModal();
+			return;
+		}
+		setOpen(true);
+	}
+	/**
+	* 反馈入口未登录拦截。
+	*/
+	function handleFeedbackEntryClick(event) {
+		if (isAuthenticated) return;
+		event.preventDefault();
+		event.stopPropagation();
+		openLoginModal();
+	}
+	return /* @__PURE__ */ jsxs(Box, {
+		className: cn("min-h-dvh bg-[var(--color-surface-panel-dark)]", className),
+		children: [
+			/* @__PURE__ */ jsx(HeaderNav, {
+				className: "!bg-[var(--color-surface-panel-dark)] !border-transparent",
+				title: t("settings.title")
+			}),
+			/* @__PURE__ */ jsx(ResetPasswordDrawer, {
+				open,
+				onOpenChange: handleResetPasswordDrawerOpenChange
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				className: "mx-4 mt-4 flex flex-col",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "block w-full text-left",
+					onClick: handleOpenResetPasswordDrawer,
+					children: /* @__PURE__ */ jsx(SettingsListItem, { title: t("settings.resetPasswordTitle") })
+				}), /* @__PURE__ */ jsx(Link, {
+					href: "/feedback",
+					onClick: handleFeedbackEntryClick,
+					className: "block",
+					children: /* @__PURE__ */ jsx(SettingsListItem, { title: t("settings.feedbackTitle") })
+				})]
+			}),
+			open || !isAuthenticated ? null : /* @__PURE__ */ jsx(Box, {
+				className: "fixed inset-x-0 bottom-0 z-40 flex flex-col pb-[env(safe-area-inset-bottom)]",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col items-center px-4 py-2",
+					style: {
+						background: "var(--color-overlay-panel-fade-start90)",
+						backdropFilter: "blur(var(--effect-backdrop-blur-detail-hero))"
+					},
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "flex h-12 w-full items-center justify-center rounded-[8px] text-base text-[var(--color-text-primary)] transition-opacity active:opacity-80",
+						style: { background: "var(--color-surface-white10)" },
+						onClick: handleOpenLogoutConfirm,
+						children: t("settings.button")
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(DeleteConfirmDialog, {
+				open: logoutConfirmOpen,
+				onOpenChange: handleLogoutConfirmOpenChange,
+				onCancel: handleCancelLogoutConfirm,
+				onConfirm: handleConfirmLogout,
+				title: "",
+				description: t("settings.logoutConfirmMessage"),
+				confirmText: t("settings.confirm"),
+				cancelText: t("settings.cancel")
+			})
+		]
+	});
+}
+/**
+* 设置项列表行，按设计稿：56px 高、16px 左右边距、右箭头。
+*/
+function SettingsListItem({ title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-14 items-center justify-between px-4",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-base text-[var(--color-text-primary)]",
+			children: title
+		}), /* @__PURE__ */ jsx(ChevronRight, { className: "size-6 shrink-0 opacity-50 text-[var(--color-text-primary)]" })]
+	});
+}
+
+//#endregion
+export { Settings };

package/dist/components/pages/settings/index.mjs

@@ -1,2 +1,11 @@
 
-import{SettingsPage as e}from"./page.mjs";import{jsx as t}from"react/jsx-runtime";function n({className:n}={}){return t(e,{className:n})}export{n as SettingsPage};
+import { SettingsPage as SettingsPage$1 } from "./page.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/pages/settings/index.tsx
+function SettingsPage({ className } = {}) {
+	return /* @__PURE__ */ jsx(SettingsPage$1, { className });
+}
+
+//#endregion
+export { SettingsPage };

package/dist/components/pages/settings/page.mjs

@@ -1,2 +1,14 @@
 
-import{Settings as e}from"./_components/settings.mjs";import{jsx as t}from"react/jsx-runtime";function n({className:n}={}){return t(e,{className:n})}export{n as SettingsPage};
+import { Settings } from "./_components/settings.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/pages/settings/page.tsx
+/**
+* 设置页面入口。
+*/
+function SettingsPage({ className } = {}) {
+	return /* @__PURE__ */ jsx(Settings, { className });
+}
+
+//#endregion
+export { SettingsPage };

package/dist/components/pages/user-follow/_components/follow-no-login.mjs

@@ -1,2 +1,35 @@
 
-"use client";import{cn as e}from"../../../../utils/cn.mjs";import{Box as t}from"../../../ui/box.mjs";import{Text as n}from"../../../ui/text.mjs";import{useOpenLoginAsync as r}from"../../../../hooks/use-auth.mjs";import i from"../../../ui/legacy/button.mjs";import{memo as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useTranslations as c}from"next-intl";const l=a(({className:a}={})=>{let l=c(`components.pages.userFollow.components`),u=r();return s(t,{className:e(`w-full bg-bg1 py-[20px] flex flex-col items-center justify-center relative z-[1]`,a),children:[s(n,{className:`text-[16px] leading-[22px] text-text1`,children:[l(`followNoLogin.notLoggedIn`),`~`]}),o(i,{className:`mt-[13px] w-[130px] h-[36px] leading-[36px] rounded-[8px] bg-theme5 text-[16px] text-white`,onClick:async()=>{await u()&&console.warn(`login success`)},children:l(`followNoLogin.login`)})]})});l.displayName=`FollowNoLogin`;export{l as FollowNoLogin};
+'use client';
+
+import { cn } from "../../../../utils/cn.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { useOpenLoginAsync } from "../../../../hooks/use-auth.mjs";
+import Button from "../../../ui/legacy/button.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/user-follow/_components/follow-no-login.tsx
+const FollowNoLogin = memo(({ className } = {}) => {
+	const t = useTranslations("components.pages.userFollow.components");
+	const openLoginAsync = useOpenLoginAsync();
+	const handleLogin = async () => {
+		if (await openLoginAsync()) console.warn("login success");
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		className: cn("w-full bg-bg1 py-[20px] flex flex-col items-center justify-center relative z-[1]", className),
+		children: [/* @__PURE__ */ jsxs(Text, {
+			className: "text-[16px] leading-[22px] text-text1",
+			children: [t("followNoLogin.notLoggedIn"), "~"]
+		}), /* @__PURE__ */ jsx(Button, {
+			className: "mt-[13px] w-[130px] h-[36px] leading-[36px] rounded-[8px] bg-theme5 text-[16px] text-white",
+			onClick: handleLogin,
+			children: t("followNoLogin.login")
+		})]
+	});
+});
+FollowNoLogin.displayName = "FollowNoLogin";
+
+//#endregion
+export { FollowNoLogin };