@allbluecn/admin-app 0.1.0

package/src/components/user/settings-profile.tsx

@@ -0,0 +1,664 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Camera, Loader2, Save, X } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  defaultSocialPlatforms,
+  socialPlatformLabels,
+} from "./settings-profile/constants";
+import type {
+  ProfileData,
+  SettingsProfileProps,
+} from "./settings-profile/types";
+
+export default function SettingsProfile({
+  profile,
+  onSave,
+  onEmailChange,
+  onAvatarUpload,
+  onAvatarRemove,
+  className,
+  showEmailVerification = true,
+  readOnly = false,
+  title = "个人信息",
+  description = "管理你的资料与头像",
+  actions,
+}: SettingsProfileProps) {
+  const [isSaving, setIsSaving] = useState(false);
+  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
+  const [isChangingEmail, setIsChangingEmail] = useState(false);
+  const [showEmailChangeForm, setShowEmailChangeForm] = useState(false);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(
+    profile?.avatar || null
+  );
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const [formData, setFormData] = useState<ProfileData>({
+    name: profile?.name || "",
+    email: profile?.email || "",
+    bio: profile?.bio || "",
+    location: profile?.location || "",
+    website: profile?.website || "",
+    socialLinks: profile?.socialLinks || [],
+  });
+
+  const [emailChangeData, setEmailChangeData] = useState({
+    newEmail: "",
+    currentPassword: "",
+  });
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const avatarFileRef = useRef<File | null>(null);
+
+  const handleAvatarSelect = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith("image/")) {
+        setErrors({ avatar: "Please select an image file" });
+        return;
+      }
+
+      if (file.size > 5 * 1024 * 1024) {
+        setErrors({ avatar: "Image size must be less than 5MB" });
+        return;
+      }
+
+      avatarFileRef.current = file;
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setAvatarPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+
+      if (onAvatarUpload) {
+        setIsUploadingAvatar(true);
+        try {
+          const avatarUrl = await onAvatarUpload(file);
+          setAvatarPreview(avatarUrl);
+          setErrors({});
+        } catch (error) {
+          setErrors({
+            avatar:
+              error instanceof Error
+                ? error.message
+                : "Failed to upload avatar",
+          });
+        } finally {
+          setIsUploadingAvatar(false);
+        }
+      }
+    },
+    [onAvatarUpload]
+  );
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleAvatarRemove = async () => {
+    if (onAvatarRemove) {
+      setIsUploadingAvatar(true);
+      try {
+        await onAvatarRemove();
+        setAvatarPreview(null);
+        avatarFileRef.current = null;
+        setErrors({});
+      } catch (error) {
+        setErrors({
+          avatar:
+            error instanceof Error ? error.message : "Failed to remove avatar",
+        });
+      } finally {
+        setIsUploadingAvatar(false);
+      }
+    } else {
+      setAvatarPreview(null);
+      avatarFileRef.current = null;
+    }
+  };
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const file = e.dataTransfer.files[0];
+      if (file) {
+        handleAvatarSelect(file);
+      }
+    },
+    [handleAvatarSelect]
+  );
+
+  const handleFileInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        handleAvatarSelect(file);
+      }
+    },
+    [handleAvatarSelect]
+  );
+
+  const handleSave = async () => {
+    setErrors({});
+
+    if (!formData.name.trim()) {
+      setErrors({ name: "Name is required" });
+      return;
+    }
+
+    if (!formData.email.trim()) {
+      setErrors({ email: "Email is required" });
+      return;
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      setErrors({ email: "Please enter a valid email address" });
+      return;
+    }
+
+    if (formData.website && formData.website.trim()) {
+      try {
+        new URL(formData.website);
+      } catch {
+        setErrors({ website: "Please enter a valid URL" });
+        return;
+      }
+    }
+
+    setIsSaving(true);
+    try {
+      await onSave?.(formData);
+    } catch (error) {
+      setErrors({
+        _general:
+          error instanceof Error ? error.message : "Failed to save profile",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleEmailChange = async () => {
+    setErrors({});
+
+    if (!emailChangeData.newEmail.trim()) {
+      setErrors({ newEmail: "New email is required" });
+      return;
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailChangeData.newEmail)) {
+      setErrors({ newEmail: "Please enter a valid email address" });
+      return;
+    }
+
+    if (!emailChangeData.currentPassword.trim()) {
+      setErrors({ currentPassword: "Current password is required" });
+      return;
+    }
+
+    setIsChangingEmail(true);
+    try {
+      await onEmailChange?.(
+        emailChangeData.newEmail,
+        emailChangeData.currentPassword
+      );
+      setFormData((prev) => ({ ...prev, email: emailChangeData.newEmail }));
+      setEmailChangeData({ newEmail: "", currentPassword: "" });
+      setShowEmailChangeForm(false);
+      setErrors({});
+    } catch (error) {
+      setErrors({
+        emailChange:
+          error instanceof Error ? error.message : "Failed to change email",
+      });
+    } finally {
+      setIsChangingEmail(false);
+    }
+  };
+
+  const updateSocialLink = (platform: string, url: string) => {
+    setFormData((prev) => {
+      const socialLinks = prev.socialLinks || [];
+      const existingIndex = socialLinks.findIndex(
+        (link) => link.platform === platform
+      );
+      const updatedLinks = [...socialLinks];
+
+      if (url.trim()) {
+        if (existingIndex >= 0) {
+          updatedLinks[existingIndex] = { platform, url };
+        } else {
+          updatedLinks.push({ platform, url });
+        }
+      } else if (existingIndex >= 0) {
+        updatedLinks.splice(existingIndex, 1);
+      }
+
+      return { ...prev, socialLinks: updatedLinks };
+    });
+  };
+
+  const getSocialLink = (platform: string): string =>
+    formData.socialLinks?.find((link) => link.platform === platform)?.url || "";
+
+  return (
+    <Card className={cn("w-full shadow-xs", className)}>
+      <CardHeader>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <CardTitle className="wrap-break-word">{title}</CardTitle>
+            <CardDescription className="wrap-break-word">
+              {description}
+            </CardDescription>
+          </div>
+          {actions ? (
+            <div className="flex shrink-0 flex-wrap gap-2">{actions}</div>
+          ) : (
+            !readOnly && (
+              <div className="flex shrink-0 gap-2">
+                <Button
+                  className="w-full sm:w-auto"
+                  disabled={isSaving}
+                  onClick={handleSave}
+                  type="button"
+                >
+                  {isSaving ? (
+                    <>
+                      <Loader2 className="size-4 animate-spin" />
+                      <span className="whitespace-nowrap">保存中…</span>
+                    </>
+                  ) : (
+                    <>
+                      <Save className="size-4" />
+                      <span className="whitespace-nowrap">保存更改</span>
+                    </>
+                  )}
+                </Button>
+              </div>
+            )
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-6">
+          {errors._general && (
+            <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
+              <p className="text-destructive text-sm">{errors._general}</p>
+            </div>
+          )}
+
+          {/* Avatar Upload */}
+          {!(readOnly && !avatarPreview) && (
+            <div className="flex flex-col gap-4">
+              <FieldLabel>头像</FieldLabel>
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+                <div
+                  className={cn(
+                    "relative flex size-24 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-dashed transition-colors",
+                    readOnly && "cursor-default border-muted bg-muted/30",
+                    !readOnly && (isUploadingAvatar
+                      ? "border-primary bg-primary/5"
+                      : "border-muted bg-muted/30 hover:border-primary/50"),
+                    !readOnly && "cursor-pointer"
+                  )}
+                  {...(readOnly
+                    ? {}
+                    : {
+                        onClick: handleAvatarClick,
+                        onDragOver: handleDragOver,
+                        onDrop: handleDrop,
+                      })}
+                >
+                  {avatarPreview ? (
+                    <>
+                      <img
+                        alt="头像"
+                        className="size-full object-cover"
+                        src={avatarPreview}
+                      />
+                      {!readOnly && isUploadingAvatar && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+                          <Loader2 className="size-6 animate-spin text-primary" />
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <Camera className="size-8 text-muted-foreground" />
+                  )}
+                </div>
+                {!readOnly && (
+                  <div className="flex flex-1 flex-col gap-2">
+                    <div className="flex flex-col gap-2 sm:flex-row">
+                      <Button
+                        onClick={handleAvatarClick}
+                        type="button"
+                        variant="outline"
+                      >
+                        <Camera className="size-4" />
+                        {avatarPreview ? "更换头像" : "上传头像"}
+                      </Button>
+                      {avatarPreview && (
+                        <Button
+                          onClick={handleAvatarRemove}
+                          type="button"
+                          variant="outline"
+                        >
+                          <X className="size-4" />
+                          移除
+                        </Button>
+                      )}
+                    </div>
+                    <p className="text-muted-foreground text-xs">
+                      拖拽图片到此，或点击选择。最大 5MB。
+                    </p>
+                    {errors.avatar && (
+                      <p className="text-destructive text-xs">{errors.avatar}</p>
+                    )}
+                  </div>
+                )}
+                {!readOnly && (
+                  <input
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleFileInputChange}
+                    ref={fileInputRef}
+                    type="file"
+                  />
+                )}
+              </div>
+            </div>
+          )}
+
+          <Separator />
+
+          {/* Basic Information */}
+          <div className="flex flex-col gap-4">
+            <Field>
+              <FieldLabel htmlFor="name">
+                姓名 <span className="text-destructive">*</span>
+              </FieldLabel>
+              <FieldContent>
+                <InputGroup>
+                  <InputGroupInput
+                    id="name"
+                    onChange={(e) =>
+                      setFormData((prev) => ({ ...prev, name: e.target.value }))
+                    }
+                    placeholder="请输入姓名"
+                    readOnly={readOnly}
+                    value={formData.name}
+                  />
+                </InputGroup>
+                {errors.name && <FieldError>{errors.name}</FieldError>}
+              </FieldContent>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="email">邮箱</FieldLabel>
+              <FieldContent>
+                <div className="flex flex-col gap-2">
+                  <InputGroup>
+                    <InputGroupInput
+                      disabled={showEmailChangeForm}
+                      id="email"
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          email: e.target.value,
+                        }))
+                      }
+                      placeholder="your.email@example.com"
+                      readOnly={readOnly}
+                      type="email"
+                      value={formData.email}
+                    />
+                  </InputGroup>
+                  {showEmailVerification && !readOnly && (
+                    <Button
+                      className="w-full sm:w-auto"
+                      onClick={() =>
+                        setShowEmailChangeForm(!showEmailChangeForm)
+                      }
+                      type="button"
+                      variant="outline"
+                    >
+                      {showEmailChangeForm ? "取消" : "修改邮箱"}
+                    </Button>
+                  )}
+                </div>
+                {errors.email && <FieldError>{errors.email}</FieldError>}
+              </FieldContent>
+            </Field>
+
+            {showEmailChangeForm && !readOnly && (
+              <div className="flex flex-col gap-4 rounded-lg border bg-muted/30 p-4">
+                <Field>
+                  <FieldLabel htmlFor="new-email">
+                    新邮箱 <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <FieldContent>
+                    <InputGroup>
+                      <InputGroupInput
+                        id="new-email"
+                        onChange={(e) =>
+                          setEmailChangeData((prev) => ({
+                            ...prev,
+                            newEmail: e.target.value,
+                          }))
+                        }
+                        placeholder="new.email@example.com"
+                        type="email"
+                        value={emailChangeData.newEmail}
+                      />
+                    </InputGroup>
+                    {errors.newEmail && (
+                      <FieldError>{errors.newEmail}</FieldError>
+                    )}
+                  </FieldContent>
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="current-password">
+                    当前密码 <span className="text-destructive">*</span>
+                  </FieldLabel>
+                  <FieldContent>
+                    <InputGroup>
+                      <InputGroupInput
+                        id="current-password"
+                        onChange={(e) =>
+                          setEmailChangeData((prev) => ({
+                            ...prev,
+                            currentPassword: e.target.value,
+                          }))
+                        }
+                        placeholder="请输入当前密码"
+                        type="password"
+                        value={emailChangeData.currentPassword}
+                      />
+                    </InputGroup>
+                    {errors.currentPassword && (
+                      <FieldError>{errors.currentPassword}</FieldError>
+                    )}
+                    {errors.emailChange && (
+                      <FieldError>{errors.emailChange}</FieldError>
+                    )}
+                  </FieldContent>
+                </Field>
+
+                <Button
+                  className="w-full sm:w-auto"
+                  disabled={isChangingEmail}
+                  onClick={handleEmailChange}
+                  type="button"
+                >
+                  {isChangingEmail ? (
+                    <>
+                      <Loader2 className="size-4 animate-spin" />
+                      修改中…
+                    </>
+                  ) : (
+                    "更新邮箱"
+                  )}
+                </Button>
+              </div>
+            )}
+
+            {!(readOnly && !formData.bio?.trim()) && (
+              <Field>
+                <FieldLabel htmlFor="bio">简介</FieldLabel>
+                <FieldContent>
+                  <Textarea
+                    id="bio"
+                    onChange={(e) =>
+                      setFormData((prev) => ({ ...prev, bio: e.target.value }))
+                    }
+                    placeholder="介绍一下自己…"
+                    readOnly={readOnly}
+                    rows={4}
+                    value={formData.bio || ""}
+                  />
+                  {!readOnly && (
+                    <FieldDescription>
+                      简短描述自己（最多 500 字符）
+                    </FieldDescription>
+                  )}
+                </FieldContent>
+              </Field>
+            )}
+
+            {!(readOnly && !formData.location?.trim()) && (
+              <Field>
+                <FieldLabel htmlFor="location">所在地</FieldLabel>
+                <FieldContent>
+                  <InputGroup>
+                    <InputGroupInput
+                      id="location"
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          location: e.target.value,
+                        }))
+                      }
+                      placeholder="城市, 国家"
+                      readOnly={readOnly}
+                      value={formData.location || ""}
+                    />
+                  </InputGroup>
+                </FieldContent>
+              </Field>
+            )}
+
+            {!(readOnly && !formData.website?.trim()) && (
+              <Field>
+                <FieldLabel htmlFor="website">网站</FieldLabel>
+                <FieldContent>
+                  <InputGroup>
+                    <InputGroupInput
+                      id="website"
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          website: e.target.value,
+                        }))
+                      }
+                      placeholder="https://example.com"
+                      readOnly={readOnly}
+                      type="url"
+                      value={formData.website || ""}
+                    />
+                  </InputGroup>
+                  {errors.website && <FieldError>{errors.website}</FieldError>}
+                </FieldContent>
+              </Field>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* Social Links */}
+          {defaultSocialPlatforms
+            .filter(
+              (platform) => !readOnly || getSocialLink(platform.id).trim()
+            )
+            .length > 0 && (
+            <div className="flex flex-col gap-4">
+              <FieldLabel>社交链接</FieldLabel>
+              <div className="flex flex-col gap-3">
+                {defaultSocialPlatforms
+                  .filter(
+                    (platform) => !readOnly || getSocialLink(platform.id).trim()
+                  )
+                  .map((platform) => (
+                    <Field key={platform.id}>
+                      <FieldLabel htmlFor={`social-${platform.id}`}>
+                        {socialPlatformLabels[platform.id] || platform.label}
+                      </FieldLabel>
+                      <FieldContent>
+                        <InputGroup>
+                          <InputGroupInput
+                            id={`social-${platform.id}`}
+                            onChange={(e) =>
+                              updateSocialLink(platform.id, e.target.value)
+                            }
+                            placeholder={platform.placeholder}
+                            readOnly={readOnly}
+                            type="url"
+                            value={getSocialLink(platform.id)}
+                          />
+                        </InputGroup>
+                      </FieldContent>
+                    </Field>
+                  ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}