@funhub/platform 0.2.29 → 0.2.31

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

@@ -1,2 +1,684 @@
 
-"use client";import{useUserStore as e}from"../../../store/modules/user-store.mjs";import{gUserGetUserEditInfo as t,gUserGetUserInfo as n,pUserEditUserInfo as r}from"../../../service/generated/client.mjs";import{uploadFile as i}from"../../../utils/upload-file.mjs";import{Avatar as ee,AvatarFallback as te,AvatarImage as ne}from"../../ui/avatar.mjs";import{Box as a}from"../../ui/box.mjs";import{InputGroup as re,InputGroupAddon as ie,InputGroupTextarea as ae}from"../../ui/input-group.mjs";import{Text as o}from"../../ui/text.mjs";import{useDeleteRequest as oe,useMutation as se,useRequest as ce}from"../../../hooks/query/use-query.mjs";import{HeaderNav as le}from"../../common/header-nav/client.mjs";import{PickerDrawer as s}from"../../common/picker/picker-drawer/picker-drawer.mjs";import{GenderPicker as ue}from"../../common/picker/gender-picker/gender-picker.mjs";import{ImageCropModal as de}from"../../common/image-crop-modal/image-crop-modal.mjs";import{toast as c}from"sonner";import{useEffect as l,useRef as u,useState as d}from"react";import{ChevronDown as fe}from"lucide-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{useTranslations as pe}from"next-intl";import{produce as me}from"immer";const m={0:`secret`,1:`male`,2:`female`},h={male:1,female:2,secret:0},g=[`image/jpeg`,`image/png`],he=/^[\u4E00-\u9FFF\w.-]+$/;function ge(e){let t=e.name.toLowerCase(),n=e.type.toLowerCase();return g.includes(n)||/\.(?:jpg|jpeg|png)$/i.test(t)}function _(e){return e?h[e]===void 0?m[e]??`secret`:e:`secret`}function v(e){if(!e)return;if(h[e]!==void 0)return h[e];let t=Number(e);return Number.isNaN(t)?void 0:t}function _e(e){return{nickname:e?.nick_name??``,gender:_(e?.gender?.toString()),signature:e?.signature??``,avatar:e?.avatar??``}}function ve(e){if(!e)return;e.focus();let t=e.value.length;e.setSelectionRange(t,t)}function ye({id:m}){let h=pe(`components.pages.edit`),{userId:g,userInfo:_,setUserInfo:ye}=e(),y=m??g,b=oe(),be={male:h(`page.genderMale`),female:h(`page.genderFemale`),secret:h(`page.genderSecret`)},xe=u(null),x=u(null),S=u(null),C=u(null),[w,T]=d(()=>_e()),[E,D]=d(!1),[Se,O]=d(null),[Ce,k]=d(!1),[A,j]=d(``),[M,N]=d(!1),[P,F]=d(``),[we,I]=d(!1),[L,R]=d(`secret`),[z,Te]=d(!1),[B,V]=d(``),Ee={code:0,message:``,data:{}},De={code:0,message:``,data:{}},{data:Oe,isLoading:H}=ce([`user-edit-info`,y],()=>y?t({user_id:y}):Promise.resolve(Ee)),{data:ke}=ce([`user-info-basic`,y],()=>y?n({user_id:y}):Promise.resolve(De)),{mutateAsync:Ae,isPending:je}=se(async e=>r(e)),Me=E||je||Se!==null,U=H||Me,W=U?`cursor-not-allowed opacity-60`:`cursor-pointer`,Ne=ke?.data?.display_id||_?.display_id||`--`,G=w.gender||`secret`,Pe=U||P.trim()===w.nickname,Fe=U||L===G,Ie=U||B===w.signature,K=`flex h-12 w-full items-center rounded-md bg-[var(--color-surface-field-bg)] px-4`,q=`text-sm leading-6 text-text3`,J=`block min-w-0 flex-1 truncate text-sm leading-5 text-text3`;l(()=>{let e=Oe?.data;e&&T(_e(e))},[Oe]),l(()=>{if(!M)return;let e=window.setTimeout(()=>{ve(x.current)},250);return()=>{window.clearTimeout(e)}},[M]),l(()=>{if(!z)return;let e=window.setTimeout(()=>{ve(S.current)},250);return()=>{window.clearTimeout(e)}},[z]),l(()=>()=>{A&&URL.revokeObjectURL(A)},[A]);function Y(e,t){T(me(n=>{n[e]=t}))}function Le(){A&&(URL.revokeObjectURL(A),j(``))}function Re(){y&&(b([`user-edit-info`,y]),b([`user-info-basic`,y]),b([`user-profile`,`mine`]),b([`user-profile`,`mine`,y]),b([`user-profile`,`profile`,y]))}function X(e){!y||y!==g||ye({..._,user_id:y,...e})}function ze(){c.info(h(`page.editBlockedWhileSaving`))}function Z(){return H?!0:Me?(ze(),!0):!1}function Be(e){return C.current?(ze(),!1):(C.current=e,O(e),!0)}function Ve(e){C.current===e&&(C.current=null,O(null))}async function Q(e,t){if(!Be(e))return!1;let n=c.loading(h(`page.savingInProgress`));try{return await t()}finally{c.dismiss(n),Ve(e)}}function He(e,t){let n={...w,...t},r={nickname:[`nick_name`,n.nickname||void 0],avatar:[`avatar`,n.avatar||void 0],signature:[`signature`,n.signature||void 0],gender:[`gender`,v(n.gender)]},i=Object.keys(r).filter(t=>t!==e).map(e=>r[e]);return i.push(r[e]),Object.fromEntries(i)}async function $(e,t){if(!y)return c.error(h(`page.userNotFound`)),!1;let n=He(e,t);try{return await Ae({user_id:y,...n}),Re(),!0}catch(e){return console.error(`更新用户信息失败`,e),c.error(h(`page.updateFailed`)),!1}}function Ue(){Z()||E||xe.current?.click()}function We(e){if(Z()){e.target&&(e.target.value=``);return}let t=e.target.files?.[0];if(t){if(!ge(t)){c.error(h(`page.imageTypeInvalid`)),e.target&&(e.target.value=``);return}j(URL.createObjectURL(t)),k(!0),e.target&&(e.target.value=``)}}async function Ge(e){await Q(`avatar`,async()=>{try{D(!0);let t=await i(new File([e],`avatar.jpg`,{type:`image/jpeg`}),1);return await $(`avatar`,{avatar:t.objectKey})?(Y(`avatar`,t.objectKey),X({avatar:t.objectKey}),Ke(),c.success(h(`page.avatarUpdateSuccess`)),!0):!1}catch(e){return console.error(`上传头像失败`,e),c.error(h(`page.avatarUploadFailed`)),!1}finally{D(!1)}})}function Ke(){k(!1),Le()}function qe(){Z()||(F(w.nickname),N(!0))}function Je(e){let t=e.target.value;F(t)}function Ye(e){return e?e.length<2?h(`page.nicknameTooShort`):he.test(e)?``:h(`page.nicknameInvalidChars`):h(`page.nicknameRequired`)}async function Xe(e){if(Pe)return!1;let t=e.trim(),n=Ye(t);return n?(c.error(n),!1):await Q(`nickname`,async()=>$(`nickname`,{nickname:t}))?(Y(`nickname`,t),X({nick_name:t}),F(t),c.success(h(`page.nicknameUpdateSuccess`)),!0):!1}function Ze(){Z()||(R(G),I(!0))}function Qe(){I(!1)}function $e(e){R(e)}async function et(e){let t=e||L||`secret`;if(t===G)return!1;let n=v(t);return await Q(`gender`,async()=>$(`gender`,{gender:t}))?(Y(`gender`,t),X({gender:n}),R(t),c.success(h(`page.genderUpdateSuccess`)),!0):!1}function tt(){Z()||(V(w.signature),Te(!0))}function nt(e){let t=e.target.value;V(t)}function rt(e){let t=e.trim();return t.length>0&&t.length<2?h(`page.signatureTooShort`):``}async function it(e){if(Ie)return!1;let t=rt(e);return t?(c.error(t),!1):await Q(`signature`,async()=>$(`signature`,{signature:e}))?(Y(`signature`,e),X({signature:e}),V(e),c.success(h(`page.signatureUpdateSuccess`)),!0):!1}return p(a,{className:`min-h-screen bg-[var(--color-surface-panel-dark)]`,children:[f(le,{className:`h-11 !border-none !bg-[var(--color-surface-panel-dark)]`,title:h(`page.title`)}),p(a,{className:`mx-auto flex w-full max-w-[390px] flex-col px-8 pb-10 pt-17`,children:[p(`button`,{type:`button`,onClick:Ue,className:`flex flex-col items-center gap-4 pb-10 ${W}`,children:[f(`input`,{ref:xe,type:`file`,accept:`.jpg,.jpeg,.png,image/jpeg,image/png`,className:`hidden`,onChange:We}),f(a,{className:`flex h-[72px] w-[72px] items-center justify-center rounded-full bg-[var(--color-surface-white20)]`,children:p(ee,{className:`h-[60px] w-[60px] border-[3px] border-[var(--color-surface-white20)]`,children:[f(ne,{src:w.avatar}),f(te,{})]})}),p(o,{className:`text-base leading-5 text-text3`,children:[`ID:`,` `,H?h(`page.loading`):E?h(`page.avatarUploading`):`${Ne}`]})]}),p(a,{className:`flex flex-col gap-6`,children:[p(a,{className:`flex flex-col gap-2`,children:[f(o,{as:`p`,className:q,children:h(`page.label`)}),f(`button`,{type:`button`,onClick:qe,className:`${K} ${W}`,children:f(o,{className:J,children:w.nickname||h(`page.nicknamePlaceholder`)})})]}),p(a,{className:`flex flex-col gap-2`,children:[f(o,{as:`p`,className:q,children:h(`page.genderLabel`)}),p(`button`,{type:`button`,onClick:Ze,className:`${K} justify-between gap-3 ${W}`,children:[f(o,{className:J,children:be[G]||h(`page.genderSecret`)}),f(fe,{className:`h-5 w-5 shrink-0 text-text3`,strokeWidth:1.75})]})]}),p(a,{className:`flex flex-col gap-2`,children:[f(o,{as:`p`,className:q,children:h(`page.signatureLabel`)}),f(`button`,{type:`button`,onClick:tt,className:`${K} ${W}`,children:f(o,{className:J,children:w.signature||h(`page.signaturePlaceholder`)})})]})]})]}),f(s,{open:M,onClose:()=>N(!1),title:h(`page.label`),confirmText:h(`page.submit`),onConfirm:e=>Xe(String(e)),confirmDisabled:Pe,children:({onValueChange:e})=>f(a,{className:`px-4 py-4 min-h-[230px]`,children:p(re,{children:[f(ae,{ref:x,className:`!bg-bg1 p-2.5`,rows:4,maxLength:24,placeholder:h(`page.nicknamePlaceholder`),value:P,onChange:t=>{Je(t),e(t.target.value)},disabled:U}),f(ie,{className:`!bg-bg1`,align:`block-end`,children:f(`div`,{className:`text-right w-full`,children:p(`span`,{className:`text-xs`,children:[P.length,`/`,24]})})})]})})}),f(ue,{open:we,onClose:Qe,value:L,onValueChange:$e,onConfirm:et,confirmDisabled:Fe}),f(s,{open:z,onClose:()=>Te(!1),title:h(`page.signatureLabel`),confirmText:h(`page.submit`),onConfirm:e=>it(String(e)),confirmDisabled:Ie,children:({onValueChange:e})=>f(a,{className:`px-4 py-4 min-h-[230px]`,children:p(re,{children:[f(ae,{ref:S,className:`!bg-bg1 p-2.5`,rows:4,maxLength:100,placeholder:h(`page.signaturePlaceholder`),value:B,onChange:t=>{nt(t),e(t.target.value)},disabled:U}),f(ie,{className:`!bg-bg1`,align:`block-end`,children:f(`div`,{className:`text-right w-full`,children:p(`span`,{className:`text-xs`,children:[B.length,`/`,100]})})})]})})}),f(de,{open:Ce,onClose:Ke,imageSrc:A,onConfirm:Ge,cropShape:`round`})]})}export{ye as EditClient};
+'use client';
+
+import { useUserStore } from "../../../store/modules/user-store.mjs";
+import { gUserGetUserEditInfo, gUserGetUserInfo, pUserEditUserInfo } from "../../../service/generated/client.mjs";
+import { uploadFile } from "../../../utils/upload-file.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.mjs";
+import { Box } from "../../ui/box.mjs";
+import { InputGroup, InputGroupAddon, InputGroupTextarea } from "../../ui/input-group.mjs";
+import { Text } from "../../ui/text.mjs";
+import { useDeleteRequest, useMutation, useRequest } from "../../../hooks/query/use-query.mjs";
+import { HeaderNav } from "../../common/header-nav/client.mjs";
+import { PickerDrawer } from "../../common/picker/picker-drawer/picker-drawer.mjs";
+import { GenderPicker } from "../../common/picker/gender-picker/gender-picker.mjs";
+import { ImageCropModal } from "../../common/image-crop-modal/image-crop-modal.mjs";
+import { toast } from "sonner";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { produce } from "immer";
+
+//#region components/pages/edit/page.tsx
+const apiGenderMap = {
+	0: "secret",
+	1: "male",
+	2: "female"
+};
+const formGenderMap = {
+	male: 1,
+	female: 2,
+	secret: 0
+};
+const nicknameMaxLength = 24;
+const signatureMaxLength = 100;
+const acceptedAvatarFileTypes = ".jpg,.jpeg,.png,image/jpeg,image/png";
+const allowedAvatarMimeTypes = ["image/jpeg", "image/png"];
+const nicknameAllowedPattern = /^[\u4E00-\u9FFF\w.-]+$/;
+/**
+* 校验头像文件格式是否受支持。
+*/
+function isSupportedAvatarFile(file) {
+	const fileName = file.name.toLowerCase();
+	const fileType = file.type.toLowerCase();
+	return allowedAvatarMimeTypes.includes(fileType) || /\.(?:jpg|jpeg|png)$/i.test(fileName);
+}
+/**
+* 将接口性别值转换为表单值。
+*/
+function normalizeGenderValue(value) {
+	if (!value) return "secret";
+	if (formGenderMap[value] !== void 0) return value;
+	return apiGenderMap[value] ?? "secret";
+}
+/**
+* 将表单性别转换为接口值。
+*/
+function resolveGenderPayload(value) {
+	if (!value) return;
+	if (formGenderMap[value] !== void 0) return formGenderMap[value];
+	const numericValue = Number(value);
+	return Number.isNaN(numericValue) ? void 0 : numericValue;
+}
+/**
+* 生成默认表单状态。
+*/
+function createDefaultFormState(editInfo) {
+	return {
+		nickname: editInfo?.nick_name ?? "",
+		gender: normalizeGenderValue(editInfo?.gender?.toString()),
+		signature: editInfo?.signature ?? "",
+		avatar: editInfo?.avatar ?? ""
+	};
+}
+/**
+* 聚焦文本域并将光标移动到末尾。
+*/
+function focusTextareaToEnd(textarea) {
+	if (!textarea) return;
+	textarea.focus();
+	const valueLength = textarea.value.length;
+	textarea.setSelectionRange(valueLength, valueLength);
+}
+/**
+* 编辑资料客户端组件。
+*/
+function EditClient({ id }) {
+	const t = useTranslations("components.pages.edit");
+	const { userId, userInfo, setUserInfo } = useUserStore();
+	const targetUserId = id ?? userId;
+	const invalidateRequest = useDeleteRequest();
+	const genderLabelMap = {
+		male: t("page.genderMale"),
+		female: t("page.genderFemale"),
+		secret: t("page.genderSecret")
+	};
+	const fileInputRef = useRef(null);
+	const nicknameInputRef = useRef(null);
+	const signatureInputRef = useRef(null);
+	const savingFieldRef = useRef(null);
+	const [form, setForm] = useState(() => createDefaultFormState());
+	const [isAvatarUploading, setIsAvatarUploading] = useState(false);
+	const [savingField, setSavingField] = useState(null);
+	const [cropModalOpen, setCropModalOpen] = useState(false);
+	const [selectedImage, setSelectedImage] = useState("");
+	const [isNicknameDialogOpen, setIsNicknameDialogOpen] = useState(false);
+	const [nicknameDraft, setNicknameDraft] = useState("");
+	const [isGenderPickerOpen, setIsGenderPickerOpen] = useState(false);
+	const [genderDraft, setGenderDraft] = useState("secret");
+	const [isSignatureDialogOpen, setIsSignatureDialogOpen] = useState(false);
+	const [signatureDraft, setSignatureDraft] = useState("");
+	const emptyUserEditInfoResponse = {
+		code: 0,
+		message: "",
+		data: {}
+	};
+	const emptyUserInfoResponse = {
+		code: 0,
+		message: "",
+		data: {}
+	};
+	const { data: userEditInfoResponse, isLoading: isLoadingUserInfo } = useRequest(["user-edit-info", targetUserId], () => {
+		if (!targetUserId) return Promise.resolve(emptyUserEditInfoResponse);
+		return gUserGetUserEditInfo({ user_id: targetUserId });
+	});
+	const { data: userInfoResponse } = useRequest(["user-info-basic", targetUserId], () => {
+		if (!targetUserId) return Promise.resolve(emptyUserInfoResponse);
+		return gUserGetUserInfo({ user_id: targetUserId });
+	});
+	const { mutateAsync: saveUserInfo, isPending: isSaving } = useMutation(async (payload) => pUserEditUserInfo(payload));
+	const isProfileSaving = isAvatarUploading || isSaving || savingField !== null;
+	const isFormDisabled = isLoadingUserInfo || isProfileSaving;
+	const fieldInteractiveClassName = isFormDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
+	const displayId = userInfoResponse?.data?.display_id || userInfo?.display_id || "--";
+	const resolvedGender = form.gender || "secret";
+	const isNicknameSubmitDisabled = isFormDisabled || nicknameDraft.trim() === form.nickname;
+	const isGenderSubmitDisabled = isFormDisabled || genderDraft === resolvedGender;
+	const isSignatureSubmitDisabled = isFormDisabled || signatureDraft === form.signature;
+	const fieldCardClassName = "flex h-12 w-full items-center rounded-md bg-[var(--color-surface-field-bg)] px-4";
+	const fieldLabelClassName = "text-sm leading-6 text-text3";
+	const fieldValueClassName = "block min-w-0 flex-1 truncate text-sm leading-5 text-text3";
+	/**
+	* 同步接口返回的用户资料。
+	*/
+	useEffect(() => {
+		const editInfo = userEditInfoResponse?.data;
+		if (!editInfo) return;
+		setForm(createDefaultFormState(editInfo));
+	}, [userEditInfoResponse]);
+	/**
+	* 昵称弹窗打开后自动聚焦输入框。
+	*/
+	useEffect(() => {
+		if (!isNicknameDialogOpen) return;
+		const timer = window.setTimeout(() => {
+			focusTextareaToEnd(nicknameInputRef.current);
+		}, 250);
+		return () => {
+			window.clearTimeout(timer);
+		};
+	}, [isNicknameDialogOpen]);
+	/**
+	* 个性签名弹窗打开后自动聚焦输入框。
+	*/
+	useEffect(() => {
+		if (!isSignatureDialogOpen) return;
+		const timer = window.setTimeout(() => {
+			focusTextareaToEnd(signatureInputRef.current);
+		}, 250);
+		return () => {
+			window.clearTimeout(timer);
+		};
+	}, [isSignatureDialogOpen]);
+	/**
+	* 组件卸载时清理头像预览 URL。
+	*/
+	useEffect(() => {
+		return () => {
+			if (selectedImage) URL.revokeObjectURL(selectedImage);
+		};
+	}, [selectedImage]);
+	/**
+	* 更新表单字段。
+	*/
+	function handleUpdateFormField(key, value) {
+		setForm(produce((draft) => {
+			draft[key] = value;
+		}));
+	}
+	/**
+	* 清理当前待裁剪图片。
+	*/
+	function clearSelectedImage() {
+		if (!selectedImage) return;
+		URL.revokeObjectURL(selectedImage);
+		setSelectedImage("");
+	}
+	/**
+	* 统一失效编辑页相关缓存。
+	*/
+	function invalidateEditRelatedRequest() {
+		if (!targetUserId) return;
+		invalidateRequest(["user-edit-info", targetUserId]);
+		invalidateRequest(["user-info-basic", targetUserId]);
+		invalidateRequest(["user-profile", "mine"]);
+		invalidateRequest([
+			"user-profile",
+			"mine",
+			targetUserId
+		]);
+		invalidateRequest([
+			"user-profile",
+			"profile",
+			targetUserId
+		]);
+	}
+	/**
+	* 同步当前登录用户缓存资料。
+	*/
+	function syncCurrentUserInfo(updates) {
+		if (!targetUserId || targetUserId !== userId) return;
+		setUserInfo({
+			...userInfo,
+			user_id: targetUserId,
+			...updates
+		});
+	}
+	/**
+	* 提示当前正在保存，暂时不可编辑其他字段。
+	*/
+	function notifySavingInProgress() {
+		toast.info(t("page.editBlockedWhileSaving"));
+	}
+	/**
+	* 判断当前交互是否需要被保存态拦截。
+	*/
+	function shouldBlockEditAction() {
+		if (isLoadingUserInfo) return true;
+		if (!isProfileSaving) return false;
+		notifySavingInProgress();
+		return true;
+	}
+	/**
+	* 进入字段保存态。
+	*/
+	function beginFieldSaving(field) {
+		if (savingFieldRef.current) {
+			notifySavingInProgress();
+			return false;
+		}
+		savingFieldRef.current = field;
+		setSavingField(field);
+		return true;
+	}
+	/**
+	* 结束字段保存态。
+	*/
+	function endFieldSaving(field) {
+		if (savingFieldRef.current !== field) return;
+		savingFieldRef.current = null;
+		setSavingField(null);
+	}
+	/**
+	* 串行执行字段保存流程，并统一展示保存提示。
+	*/
+	async function runFieldSave(field, action) {
+		if (!beginFieldSaving(field)) return false;
+		const loadingToastId = toast.loading(t("page.savingInProgress"));
+		try {
+			return await action();
+		} finally {
+			toast.dismiss(loadingToastId);
+			endFieldSaving(field);
+		}
+	}
+	/**
+	* 聚合当前表单数据，并将当前修改字段放到请求对象最后。
+	*/
+	function buildAggregatedUpdatePayload(changedField, formPatch) {
+		const nextForm = {
+			...form,
+			...formPatch
+		};
+		const payloadMap = {
+			nickname: ["nick_name", nextForm.nickname || void 0],
+			avatar: ["avatar", nextForm.avatar || void 0],
+			signature: ["signature", nextForm.signature || void 0],
+			gender: ["gender", resolveGenderPayload(nextForm.gender)]
+		};
+		const orderedPayloadEntries = Object.keys(payloadMap).filter((field) => field !== changedField).map((field) => payloadMap[field]);
+		orderedPayloadEntries.push(payloadMap[changedField]);
+		return Object.fromEntries(orderedPayloadEntries);
+	}
+	/**
+	* 提交用户资料更新。
+	*/
+	async function submitUserProfileUpdate(changedField, formPatch) {
+		if (!targetUserId) {
+			toast.error(t("page.userNotFound"));
+			return false;
+		}
+		const payload = buildAggregatedUpdatePayload(changedField, formPatch);
+		try {
+			await saveUserInfo({
+				user_id: targetUserId,
+				...payload
+			});
+			invalidateEditRelatedRequest();
+			return true;
+		} catch (error) {
+			console.error("更新用户信息失败", error);
+			toast.error(t("page.updateFailed"));
+			return false;
+		}
+	}
+	/**
+	* 触发头像更换。
+	*/
+	function handleAvatarChange() {
+		if (shouldBlockEditAction() || isAvatarUploading) return;
+		fileInputRef.current?.click();
+	}
+	/**
+	* 处理头像文件变更。
+	*/
+	function handleAvatarFileChange(event) {
+		if (shouldBlockEditAction()) {
+			if (event.target) event.target.value = "";
+			return;
+		}
+		const file = event.target.files?.[0];
+		if (!file) return;
+		if (!isSupportedAvatarFile(file)) {
+			toast.error(t("page.imageTypeInvalid"));
+			if (event.target) event.target.value = "";
+			return;
+		}
+		setSelectedImage(URL.createObjectURL(file));
+		setCropModalOpen(true);
+		if (event.target) event.target.value = "";
+	}
+	/**
+	* 处理头像裁剪确认。
+	*/
+	async function handleCropConfirm(croppedBlob) {
+		await runFieldSave("avatar", async () => {
+			try {
+				setIsAvatarUploading(true);
+				const result = await uploadFile(new File([croppedBlob], "avatar.jpg", { type: "image/jpeg" }), 1);
+				if (!await submitUserProfileUpdate("avatar", { avatar: result.objectKey })) return false;
+				handleUpdateFormField("avatar", result.objectKey);
+				syncCurrentUserInfo({ avatar: result.objectKey });
+				handleCropCancel();
+				toast.success(t("page.avatarUpdateSuccess"));
+				return true;
+			} catch (error) {
+				console.error("上传头像失败", error);
+				toast.error(t("page.avatarUploadFailed"));
+				return false;
+			} finally {
+				setIsAvatarUploading(false);
+			}
+		});
+	}
+	/**
+	* 处理头像裁剪取消。
+	*/
+	function handleCropCancel() {
+		setCropModalOpen(false);
+		clearSelectedImage();
+	}
+	/**
+	* 打开昵称弹窗。
+	*/
+	function handleOpenNicknameDialog() {
+		if (shouldBlockEditAction()) return;
+		setNicknameDraft(form.nickname);
+		setIsNicknameDialogOpen(true);
+	}
+	/**
+	* 处理昵称输入。
+	*/
+	function handleNicknameDraftChange(event) {
+		const nextValue = event.target.value;
+		setNicknameDraft(nextValue);
+	}
+	/**
+	* 校验昵称。
+	*/
+	function validateNickname(value) {
+		if (!value) return t("page.nicknameRequired");
+		if (value.length < 2) return t("page.nicknameTooShort");
+		if (!nicknameAllowedPattern.test(value)) return t("page.nicknameInvalidChars");
+		return "";
+	}
+	/**
+	* 提交昵称修改。
+	*/
+	async function handleSubmitNickname(nextValue) {
+		if (isNicknameSubmitDisabled) return false;
+		const nextNickname = nextValue.trim();
+		const validationMessage = validateNickname(nextNickname);
+		if (validationMessage) {
+			toast.error(validationMessage);
+			return false;
+		}
+		if (!await runFieldSave("nickname", async () => {
+			return submitUserProfileUpdate("nickname", { nickname: nextNickname });
+		})) return false;
+		handleUpdateFormField("nickname", nextNickname);
+		syncCurrentUserInfo({ nick_name: nextNickname });
+		setNicknameDraft(nextNickname);
+		toast.success(t("page.nicknameUpdateSuccess"));
+		return true;
+	}
+	/**
+	* 打开性别选择器。
+	*/
+	function handleOpenGenderPicker() {
+		if (shouldBlockEditAction()) return;
+		setGenderDraft(resolvedGender);
+		setIsGenderPickerOpen(true);
+	}
+	/**
+	* 关闭性别选择器。
+	*/
+	function handleCloseGenderPicker() {
+		setIsGenderPickerOpen(false);
+	}
+	/**
+	* 处理性别滚轮选择。
+	*/
+	function handleGenderValueChange(value) {
+		setGenderDraft(value);
+	}
+	/**
+	* 提交性别修改。
+	*/
+	async function handleConfirmGender(value) {
+		const nextGender = value || genderDraft || "secret";
+		if (nextGender === resolvedGender) return false;
+		const resolvedGenderPayload = resolveGenderPayload(nextGender);
+		if (!await runFieldSave("gender", async () => {
+			return submitUserProfileUpdate("gender", { gender: nextGender });
+		})) return false;
+		handleUpdateFormField("gender", nextGender);
+		syncCurrentUserInfo({ gender: resolvedGenderPayload });
+		setGenderDraft(nextGender);
+		toast.success(t("page.genderUpdateSuccess"));
+		return true;
+	}
+	/**
+	* 打开个人签名弹窗。
+	*/
+	function handleOpenSignatureDialog() {
+		if (shouldBlockEditAction()) return;
+		setSignatureDraft(form.signature);
+		setIsSignatureDialogOpen(true);
+	}
+	/**
+	* 处理个人签名输入。
+	*/
+	function handleSignatureDraftChange(event) {
+		const nextValue = event.target.value;
+		setSignatureDraft(nextValue);
+	}
+	/**
+	* 校验个人签名。
+	*/
+	function validateSignature(value) {
+		const trimmedValue = value.trim();
+		if (trimmedValue.length > 0 && trimmedValue.length < 2) return t("page.signatureTooShort");
+		return "";
+	}
+	/**
+	* 提交个人签名修改。
+	*/
+	async function handleSubmitSignature(nextValue) {
+		if (isSignatureSubmitDisabled) return false;
+		const validationMessage = validateSignature(nextValue);
+		if (validationMessage) {
+			toast.error(validationMessage);
+			return false;
+		}
+		if (!await runFieldSave("signature", async () => {
+			return submitUserProfileUpdate("signature", { signature: nextValue });
+		})) return false;
+		handleUpdateFormField("signature", nextValue);
+		syncCurrentUserInfo({ signature: nextValue });
+		setSignatureDraft(nextValue);
+		toast.success(t("page.signatureUpdateSuccess"));
+		return true;
+	}
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "min-h-screen bg-[var(--color-surface-panel-dark)]",
+		children: [
+			/* @__PURE__ */ jsx(HeaderNav, {
+				className: "h-11 !border-none !bg-[var(--color-surface-panel-dark)]",
+				title: t("page.title")
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				className: "mx-auto flex w-full max-w-[390px] flex-col px-8 pb-10 pt-17",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: handleAvatarChange,
+					className: `flex flex-col items-center gap-4 pb-10 ${fieldInteractiveClassName}`,
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							ref: fileInputRef,
+							type: "file",
+							accept: acceptedAvatarFileTypes,
+							className: "hidden",
+							onChange: handleAvatarFileChange
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							className: "flex h-[72px] w-[72px] items-center justify-center rounded-full bg-[var(--color-surface-white20)]",
+							children: /* @__PURE__ */ jsxs(Avatar, {
+								className: "h-[60px] w-[60px] border-[3px] border-[var(--color-surface-white20)]",
+								children: [/* @__PURE__ */ jsx(AvatarImage, { src: form.avatar }), /* @__PURE__ */ jsx(AvatarFallback, {})]
+							})
+						}),
+						/* @__PURE__ */ jsxs(Text, {
+							className: "text-base leading-5 text-text3",
+							children: [
+								"ID:",
+								" ",
+								isLoadingUserInfo ? t("page.loading") : isAvatarUploading ? t("page.avatarUploading") : `${displayId}`
+							]
+						})
+					]
+				}), /* @__PURE__ */ jsxs(Box, {
+					className: "flex flex-col gap-6",
+					children: [
+						/* @__PURE__ */ jsxs(Box, {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "p",
+								className: fieldLabelClassName,
+								children: t("page.label")
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handleOpenNicknameDialog,
+								className: `${fieldCardClassName} ${fieldInteractiveClassName}`,
+								children: /* @__PURE__ */ jsx(Text, {
+									className: fieldValueClassName,
+									children: form.nickname || t("page.nicknamePlaceholder")
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Box, {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "p",
+								className: fieldLabelClassName,
+								children: t("page.genderLabel")
+							}), /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: handleOpenGenderPicker,
+								className: `${fieldCardClassName} justify-between gap-3 ${fieldInteractiveClassName}`,
+								children: [/* @__PURE__ */ jsx(Text, {
+									className: fieldValueClassName,
+									children: genderLabelMap[resolvedGender] || t("page.genderSecret")
+								}), /* @__PURE__ */ jsx(ChevronDown, {
+									className: "h-5 w-5 shrink-0 text-text3",
+									strokeWidth: 1.75
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Box, {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "p",
+								className: fieldLabelClassName,
+								children: t("page.signatureLabel")
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handleOpenSignatureDialog,
+								className: `${fieldCardClassName} ${fieldInteractiveClassName}`,
+								children: /* @__PURE__ */ jsx(Text, {
+									className: fieldValueClassName,
+									children: form.signature || t("page.signaturePlaceholder")
+								})
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(PickerDrawer, {
+				open: isNicknameDialogOpen,
+				onClose: () => setIsNicknameDialogOpen(false),
+				title: t("page.label"),
+				confirmText: t("page.submit"),
+				onConfirm: (value) => handleSubmitNickname(String(value)),
+				confirmDisabled: isNicknameSubmitDisabled,
+				children: ({ onValueChange }) => /* @__PURE__ */ jsx(Box, {
+					className: "px-4 py-4 min-h-[230px]",
+					children: /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
+						ref: nicknameInputRef,
+						className: "!bg-bg1 p-2.5",
+						rows: 4,
+						maxLength: nicknameMaxLength,
+						placeholder: t("page.nicknamePlaceholder"),
+						value: nicknameDraft,
+						onChange: (event) => {
+							handleNicknameDraftChange(event);
+							onValueChange(event.target.value);
+						},
+						disabled: isFormDisabled
+					}), /* @__PURE__ */ jsx(InputGroupAddon, {
+						className: "!bg-bg1",
+						align: "block-end",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "text-right w-full",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "text-xs",
+								children: [
+									nicknameDraft.length,
+									"/",
+									nicknameMaxLength
+								]
+							})
+						})
+					})] })
+				})
+			}),
+			/* @__PURE__ */ jsx(GenderPicker, {
+				open: isGenderPickerOpen,
+				onClose: handleCloseGenderPicker,
+				value: genderDraft,
+				onValueChange: handleGenderValueChange,
+				onConfirm: handleConfirmGender,
+				confirmDisabled: isGenderSubmitDisabled
+			}),
+			/* @__PURE__ */ jsx(PickerDrawer, {
+				open: isSignatureDialogOpen,
+				onClose: () => setIsSignatureDialogOpen(false),
+				title: t("page.signatureLabel"),
+				confirmText: t("page.submit"),
+				onConfirm: (value) => handleSubmitSignature(String(value)),
+				confirmDisabled: isSignatureSubmitDisabled,
+				children: ({ onValueChange }) => /* @__PURE__ */ jsx(Box, {
+					className: "px-4 py-4 min-h-[230px]",
+					children: /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
+						ref: signatureInputRef,
+						className: "!bg-bg1 p-2.5",
+						rows: 4,
+						maxLength: signatureMaxLength,
+						placeholder: t("page.signaturePlaceholder"),
+						value: signatureDraft,
+						onChange: (event) => {
+							handleSignatureDraftChange(event);
+							onValueChange(event.target.value);
+						},
+						disabled: isFormDisabled
+					}), /* @__PURE__ */ jsx(InputGroupAddon, {
+						className: "!bg-bg1",
+						align: "block-end",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "text-right w-full",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "text-xs",
+								children: [
+									signatureDraft.length,
+									"/",
+									signatureMaxLength
+								]
+							})
+						})
+					})] })
+				})
+			}),
+			/* @__PURE__ */ jsx(ImageCropModal, {
+				open: cropModalOpen,
+				onClose: handleCropCancel,
+				imageSrc: selectedImage,
+				onConfirm: handleCropConfirm,
+				cropShape: "round"
+			})
+		]
+	});
+}
+
+//#endregion
+export { EditClient };